/
You
Make a home page and a product page for a website that sells instruments (musical). Put place holder images and text. show both side by side.
Assistant
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Instrument Shop — Homepage and Product Page</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');
:root {
--paper: #FAF9F5;
--surface: #F2EFE6;
--border: #DDD9CC;
--ink: #1A1814;
--muted: #7A7568;
--accent: #D4780E;
--accent-dark: #9f5708;
--serif: "Source Serif 4", Georgia, serif;
--sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
html {
color: var(--ink);
background: #e0e0e0;
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
margin:0;
padding:16px;
background:#e0e0e0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:16px;
box-sizing:border-box;
min-height:100vh;
}
.preview-card {
border-radius:8px;
overflow:hidden;
box-shadow:0 1px 4px rgba(0,0,0,.14);
}
.preview-label {
padding:8px 14px;
font:700 10px/1 system-ui;
letter-spacing:.1em;
text-transform:uppercase;
background:#fff;
border-bottom:1px solid #e4e4e4;
color:#666;
}
.clip-window {
position:relative;
height:520px;
overflow:hidden;
background:#fff;
}
.scale-wrapper {
width:139%;
transform:scale(0.72);
transform-origin:top left;
}
.page {
width: 100%;
min-width: 880px;
background: var(--paper);
color: var(--ink);
border: 0;
overflow: hidden;
}
.site-header {
height: 84px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 48px;
border-bottom: 1px solid var(--border);
background: var(--paper);
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--ink);
font-weight: 800;
letter-spacing: -0.02em;
}
.brand-mark {
width: 36px;
height: 36px;
border: 1px solid var(--border);
border-radius: 999px;
display: grid;
place-items: center;
background: var(--surface);
color: var(--accent);
flex: 0 0 auto;
}
.brand span {
font-size: 18px;
}
.nav {
display: flex;
align-items: center;
gap: 28px;
font-size: 14px;
color: var(--muted);
}
.nav a {
color: inherit;
text-decoration: none;
font-weight: 600;
}
.nav a:hover {
color: var(--ink);
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.icon-button {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--paper);
color: var(--ink);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: 6px;
border: 1px solid var(--accent);
background: var(--accent);
color: #fffaf1;
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: background 300ms ease-in-out, border-color 300ms ease-in-out;
}
.button:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
}
.button.secondary {
background: transparent;
color: var(--ink);
border-color: var(--border);
}
.button.secondary:hover {
background: var(--surface);
border-color: var(--border);
}
.hero {
height: 560px;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 48px;
align-items: center;
padding: 56px 48px 64px;
background:
radial-gradient(circle at 74% 16%, rgba(212,120,14,.12), transparent 270px),
var(--paper);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 18px;
color: var(--accent);
font-size: 13px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.eyebrow:before {
content: "";
width: 28px;
height: 1px;
background: var(--accent);
display: inline-block;
}
h1, h2, h3 {
font-family: var(--serif);
font-weight: 500;
color: var(--ink);
margin: 0;
letter-spacing: -0.015em;
}
.hero h1 {
font-size: 64px;
line-height: .98;
max-width: 670px;
}
.hero p {
margin: 24px 0 0;
max-width: 570px;
font-size: 18px;
line-height: 1.7;
color: var(--muted);
}
.hero-actions {
margin-top: 32px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero-media {
height: 430px;
border-radius: 12px;
border: 1px solid var(--border);
overflow: hidden;
background: var(--surface);
position: relative;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(.92) contrast(.98);
}
.media-note {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
padding: 18px;
border-radius: 12px;
background: rgba(250,249,245,.91);
border: 1px solid rgba(221,217,204,.86);
backdrop-filter: blur(8px);
}
.media-note strong {
display: block;
font-size: 15px;
margin-bottom: 4px;
}
.media-note span {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.trust-row {
height: 112px;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.trust-item {
padding: 24px 28px;
border-right: 1px solid var(--border);
}
.trust-item:last-child {
border-right: 0;
}
.trust-item strong {
display: block;
font-size: 24px;
line-height: 1;
font-variant-numeric: tabular-nums;
margin-bottom: 8px;
}
.trust-item span {
color: var(--muted);
font-size: 13px;
line-height: 1.4;
}
.section {
padding: 72px 48px;
background: var(--paper);
}
.section.alt {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
margin-bottom: 28px;
}
.section-head h2 {
font-size: 38px;
line-height: 1.08;
max-width: 560px;
}
.section-head p {
margin: 0;
max-width: 380px;
color: var(--muted);
line-height: 1.65;
font-size: 15px;
}
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.category-card {
min-height: 250px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--paper);
overflow: hidden;
}
.category-card img {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
}
.category-card .card-copy {
padding: 20px;
}
.category-card h3 {
font-size: 24px;
margin-bottom: 8px;
}
.category-card p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.featured-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.product-card {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
overflow: hidden;
min-height: 358px;
}
.product-card img {
width: 100%;
height: 188px;
object-fit: cover;
display: block;
background: var(--paper);
border-bottom: 1px solid var(--border);
}
.product-card-body {
padding: 18px;
}
.product-meta {
color: var(--accent);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 800;
margin-bottom: 8px;
}
.product-card h3 {
font-size: 21px;
line-height: 1.08;
margin-bottom: 10px;
}
.product-card p {
color: var(--muted);
margin: 0 0 14px;
font-size: 13px;
line-height: 1.5;
}
.price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.mini-link {
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--accent);
font-size: 13px;
font-weight: 800;
}
.story-band {
height: 342px;
display: grid;
grid-template-columns: .72fr 1.28fr;
border-top: 1px solid var(--border);
background: var(--paper);
}
.story-band img {
width: 100%;
height: 342px;
object-fit: cover;
display: block;
border-right: 1px solid var(--border);
}
.story-copy {
padding: 58px 56px;
}
.story-copy h2 {
font-size: 40px;
line-height: 1.08;
margin-bottom: 18px;
}
.story-copy p {
margin: 0;
max-width: 620px;
color: var(--muted);
font-size: 16px;
line-height: 1.7;
}
.footer {
height: 235px;
padding: 42px 48px;
background: var(--ink);
color: #FAF9F5;
display: grid;
grid-template-columns: 1.2fr repeat(3, .6fr);
gap: 28px;
}
.footer h3 {
color: #FAF9F5;
font-size: 22px;
margin-bottom: 12px;
}
.footer p,
.footer a {
color: rgba(250,249,245,.68);
font-size: 13px;
line-height: 1.65;
text-decoration: none;
display: block;
margin: 0 0 8px;
}
.footer strong {
display: block;
color: #FAF9F5;
margin-bottom: 12px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .08em;
}
/* Product page */
.breadcrumb {
height: 58px;
display: flex;
align-items: center;
gap: 9px;
padding: 0 48px;
color: var(--muted);
font-size: 13px;
border-bottom: 1px solid var(--border);
background: var(--paper);
}
.breadcrumb a {
color: var(--muted);
text-decoration: none;
}
.product-detail {
height: 650px;
display: grid;
grid-template-columns: 1fr .86fr;
gap: 48px;
padding: 48px;
background: var(--paper);
}
.gallery {
display: grid;
grid-template-columns: 96px 1fr;
gap: 16px;
height: 554px;
}
.thumbs {
display: grid;
grid-template-rows: repeat(4, 1fr);
gap: 12px;
}
.thumb {
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--surface);
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.main-product-image {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--surface);
position: relative;
}
.main-product-image img {
width: 100%;
height: 554px;
object-fit: cover;
display: block;
}
.badge {
position: absolute;
top: 18px;
left: 18px;
padding: 8px 11px;
border-radius: 999px;
background: var(--paper);
border: 1px solid var(--border);
color: var(--accent);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 800;
}
.product-summary {
padding: 8px 0;
}
.rating-row {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 14px;
margin-bottom: 18px;
}
.stars {
color: var(--accent);
letter-spacing: 1px;
font-size: 14px;
}
.product-summary h1 {
font-size: 54px;
line-height: 1;
margin-bottom: 18px;
max-width: 570px;
}
.summary-copy {
color: var(--muted);
font-size: 16px;
line-height: 1.7;
margin: 0 0 24px;
max-width: 590px;
}
.product-price {
font-size: 28px;
font-weight: 800;
margin-bottom: 24px;
font-variant-numeric: tabular-nums;
}
.option-group {
margin-bottom: 22px;
}
.option-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 10px;
}
.option-label span:last-child {
color: var(--muted);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.finish-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.finish-option {
min-height: 54px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
}
.finish-option.active {
border-color: var(--accent);
background: rgba(212,120,14,.08);
}
.quantity-row {
display: grid;
grid-template-columns: 132px 1fr;
gap: 12px;
margin: 26px 0 22px;
}
.qty {
height: 50px;
border: 1px solid var(--border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-around;
font-weight: 800;
background: var(--surface);
font-variant-numeric: tabular-nums;
}
.shipping-note {
padding: 16px 18px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
.shipping-note strong {
color: var(--ink);
}
.detail-tabs {
height: 420px;
padding: 0 48px 64px;
background: var(--paper);
}
.tab-panel {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--surface);
}
.tab-nav {
height: 58px;
display: flex;
border-bottom: 1px solid var(--border);
}
.tab-nav span {
display: flex;
align-items: center;
padding: 0 24px;
border-right: 1px solid var(--border);
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.tab-nav span.active {
color: var(--ink);
background: var(--paper);
}
.tab-content {
display: grid;
grid-template-columns: 1fr .8fr;
gap: 32px;
padding: 32px;
}
.tab-content h2 {
font-size: 32px;
line-height: 1.1;
margin-bottom: 14px;
}
.tab-content p {
margin: 0;
color: var(--muted);
line-height: 1.7;
font-size: 15px;
}
.spec-list {
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--paper);
}
.spec-row {
min-height: 46px;
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--border);
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.spec-row:last-child {
border-bottom: 0;
}
.spec-row span {
padding: 13px 16px;
}
.spec-row span:first-child {
color: var(--muted);
border-right: 1px solid var(--border);
}
.related-section {
height: 486px;
padding: 64px 48px;
background: var(--surface);
border-top: 1px solid var(--border);
}
.related-section h2 {
font-size: 36px;
margin-bottom: 24px;
}
.small-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.small-product {
min-height: 256px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--paper);
overflow: hidden;
}
.small-product img {
width: 100%;
height: 142px;
object-fit: cover;
display: block;
border-bottom: 1px solid var(--border);
}
.small-product div {
padding: 18px;
}
.small-product h3 {
font-size: 22px;
margin-bottom: 8px;
}
.small-product p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="preview-card">
<div class="preview-label">Homepage — Resonant Instruments</div>
<div class="clip-window">
<div class="scale-wrapper">
<div class="page" aria-label="Homepage design for Resonant Instruments">
<header class="site-header">
<a class="brand" href="#" aria-label="Resonant Instruments home">
<span class="brand-mark" aria-hidden="true">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none">
<path d="M9 18.5V5.2L19 3v12.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.6 21c1.99 0 3.6-1.12 3.6-2.5S8.59 16 6.6 16 3 17.12 3 18.5 4.61 21 6.6 21Z" stroke="currentColor" stroke-width="1.8"/>
<path d="M16.4 18.3c1.99 0 3.6-1.12 3.6-2.5s-1.61-2.5-3.6-2.5-3.6 1.12-3.6 2.5 1.61 2.5 3.6 2.5Z" stroke="currentColor" stroke-width="1.8"/>
</svg>
</span>
<span>Resonant</span>
</a>
<nav class="nav" aria-label="Primary navigation">
<a href="#">Guitars</a>
<a href="#">Keys</a>
<a href="#">Drums</a>
<a href="#">Recording</a>
<a href="#">Lessons</a>
</nav>
<div class="header-actions">
<button class="icon-button" aria-label="Search">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path d="m21 21-4.35-4.35M10.8 18.1a7.3 7.3 0 1 1 0-14.6 7.3 7.3 0 0 1 0 14.6Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
<a class="button" href="#">Shop now</a>
</div>
</header>
<main>
<section class="hero" aria-labelledby="home-title">
<div>
<p class="eyebrow">New season collection</p>
<h1 id="home-title">Find the instrument that keeps you playing.</h1>
<p>Explore carefully selected guitars, keyboards, drums, brass, and studio essentials for beginners, working musicians, and lifelong collectors.</p>
<div class="hero-actions">
<a class="button" href="#">Browse instruments</a>
<a class="button secondary" href="#">Talk to a specialist</a>
</div>
</div>
<div class="hero-media">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=warm+editorial+music+shop+interior+with+acoustic+guitars+piano+and+drum+kit+natural+light" alt="A warm music shop interior with guitars, keyboard, and drums on display" />
<div class="media-note">
<strong>Set up before it ships</strong>
<span>Every fretted instrument receives a basic inspection, tuning, and playability check from our in-house team.</span>
</div>
</div>
</section>
<section class="trust-row" aria-label="Store highlights">
<div class="trust-item">
<strong>1,200+</strong>
<span>Instruments and accessories in stock</span>
</div>
<div class="trust-item">
<strong>48 hr</strong>
<span>Typical dispatch on ready-to-ship items</span>
</div>
<div class="trust-item">
<strong>30 day</strong>
<span>Simple returns on most online orders</span>
</div>
<div class="trust-item">
<strong>4.8/5</strong>
<span>Average customer service rating</span>
</div>
</section>
<section class="section alt" aria-labelledby="categories-title">
<div class="section-head">
<h2 id="categories-title">Shop by the way you make sound.</h2>
<p>Start with the instrument family you know, or discover something new with guidance from players who understand the details.</p>
</div>
<div class="category-grid">
<article class="category-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=close+up+of+acoustic+and+electric+guitars+on+wooden+stands+warm+studio+lighting" alt="Acoustic and electric guitars on wooden stands" />
<div class="card-copy">
<h3>Strings</h3>
<p>Acoustic, electric, bass, ukulele, mandolin, and the parts that keep them stage-ready.</p>
</div>
</article>
<article class="category-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=modern+digital+piano+and+synthesizer+keys+in+a+minimal+music+studio+warm+tones" alt="A digital piano and synthesizer in a minimal studio" />
<div class="card-copy">
<h3>Keys</h3>
<p>Digital pianos, synthesizers, controllers, workstations, and home practice essentials.</p>
</div>
</article>
<article class="category-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=drum+kit+cymbals+and+percussion+instruments+arranged+in+warm+rehearsal+room" alt="A drum kit and percussion instruments in a rehearsal room" />
<div class="card-copy">
<h3>Rhythm</h3>
<p>Acoustic kits, electronic drums, cymbals, hand percussion, sticks, heads, and hardware.</p>
</div>
</article>
</div>
</section>
<section class="section" aria-labelledby="featured-title">
<div class="section-head">
<h2 id="featured-title">Popular instruments this week.</h2>
<p>Reliable picks with approachable pricing, solid build quality, and enough character to grow with you.</p>
</div>
<div class="featured-grid">
<article class="product-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=spruce+top+acoustic+guitar+on+linen+background+product+photography" alt="Spruce top acoustic guitar" />
<div class="product-card-body">
<div class="product-meta">Acoustic guitar</div>
<h3>Orchard OM-42</h3>
<p>Balanced folk body with a solid spruce top and comfortable satin neck.</p>
<div class="price-row">
<span>$649</span>
<a class="mini-link" href="#">View</a>
</div>
</div>
</article>
<article class="product-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=compact+analog+synthesizer+on+cream+background+product+photography" alt="Compact analog synthesizer" />
<div class="product-card-body">
<div class="product-meta">Synthesizer</div>
<h3>Vale Mono 37</h3>
<p>Warm analog voice with hands-on controls for quick sound shaping.</p>
<div class="price-row">
<span>$529</span>
<a class="mini-link" href="#">View</a>
</div>
</div>
</article>
<article class="product-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=snare+drum+with+brushed+steel+shell+on+neutral+background+product+photography" alt="Brushed steel snare drum" />
<div class="product-card-body">
<div class="product-meta">Snare drum</div>
<h3>Northline 14×5.5</h3>
<p>Crisp attack and controlled sustain for studio or live work.</p>
<div class="price-row">
<span>$289</span>
<a class="mini-link" href="#">View</a>
</div>
</div>
</article>
<article class="product-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=student+alto+saxophone+on+warm+cream+background+product+photography" alt="Student alto saxophone" />
<div class="product-card-body">
<div class="product-meta">Woodwind</div>
<h3>Arbor Alto Sax</h3>
<p>Responsive student horn with durable keywork and bright tone.</p>
<div class="price-row">
<span>$799</span>
<a class="mini-link" href="#">View</a>
</div>
</div>
</article>
</div>
</section>
<section class="story-band" aria-labelledby="store-story-title">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=instrument+repair+bench+with+guitar+tools+strings+and+warm+desk+lamp+editorial+photo" alt="A guitar repair bench with tools and strings" />
<div class="story-copy">
<h2 id="store-story-title">Advice from people who still play after closing.</h2>
<p>Our team includes teachers, recording engineers, touring players, and repair technicians. Ask us what fits your budget, your hands, your room, or your next show—we will give you a straight answer.</p>
</div>
</section>
</main>
<footer class="footer">
<div>
<h3>Resonant</h3>
<p>Instruments, accessories, and practical guidance for people building a life around music.</p>
</div>
<div>
<strong>Shop</strong>
<a href="#">Guitars</a>
<a href="#">Keyboards</a>
<a href="#">Drums</a>
<a href="#">Recording</a>
</div>
<div>
<strong>Support</strong>
<a href="#">Shipping</a>
<a href="#">Returns</a>
<a href="#">Repairs</a>
<a href="#">Financing</a>
</div>
<div>
<strong>Visit</strong>
<p>214 Maple Street<br>Portland, OR</p>
<p>Open Tue–Sun</p>
</div>
</footer>
</div>
</div>
</div>
</div>
<div class="preview-card">
<div class="preview-label">Product Page — Acoustic Guitar</div>
<div class="clip-window">
<div class="scale-wrapper">
<div class="page
You
show the output
Assistant
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resonant Instruments — Home and Product Page</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');
:root{
--paper:#FAF9F5;
--surface:#F2EFE6;
--border:#DDD9CC;
--ink:#1A1814;
--muted:#7A7568;
--accent:#D4780E;
--serif:"Source Serif 4", Georgia, serif;
--sans:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
body{
margin:0;
padding:16px;
background:#e0e0e0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:16px;
box-sizing:border-box;
min-height:100vh;
color:var(--ink);
font-family:var(--sans);
}
.card{
border-radius:8px;
overflow:hidden;
box-shadow:0 1px 4px rgba(0,0,0,.14);
}
.label{
padding:8px 14px;
font:700 10px/1 system-ui;
letter-spacing:.1em;
text-transform:uppercase;
background:#fff;
border-bottom:1px solid #e4e4e4;
color:#666;
}
.clip{
position:relative;
height:520px;
overflow:hidden;
background:#fff;
}
.scale{
width:139%;
transform:scale(0.72);
transform-origin:top left;
}
.page{
width:100%;
min-width:900px;
background:var(--paper);
color:var(--ink);
overflow:hidden;
}
.header{
height:82px;
padding:0 48px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--border);
background:var(--paper);
}
.brand{
display:flex;
align-items:center;
gap:12px;
color:var(--ink);
text-decoration:none;
font-weight:800;
font-size:18px;
letter-spacing:-.02em;
}
.mark{
width:36px;
height:36px;
display:grid;
place-items:center;
border:1px solid var(--border);
border-radius:50%;
background:var(--surface);
color:var(--accent);
}
.nav{
display:flex;
gap:26px;
color:var(--muted);
font-size:14px;
font-weight:650;
}
.nav a{
color:inherit;
text-decoration:none;
}
.actions{
display:flex;
gap:12px;
align-items:center;
}
.icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid var(--border);
border-radius:6px;
background:transparent;
color:var(--ink);
}
.button{
min-height:44px;
padding:0 18px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--accent);
border-radius:6px;
background:var(--accent);
color:#fffaf2;
font-size:14px;
font-weight:750;
text-decoration:none;
}
.button.ghost{
background:transparent;
border-color:var(--border);
color:var(--ink);
}
h1,h2,h3{
font-family:var(--serif);
font-weight:500;
margin:0;
color:var(--ink);
letter-spacing:-.015em;
}
p{margin:0}
.hero{
height:565px;
padding:56px 48px 64px;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:48px;
align-items:center;
background:radial-gradient(circle at 76% 12%, rgba(212,120,14,.14), transparent 280px), var(--paper);
}
.eyebrow{
margin:0 0 18px;
color:var(--accent);
font-size:13px;
font-weight:800;
letter-spacing:.09em;
text-transform:uppercase;
}
.hero h1{
max-width:680px;
font-size:64px;
line-height:.98;
}
.hero p.copy{
max-width:560px;
margin-top:24px;
color:var(--muted);
font-size:18px;
line-height:1.7;
}
.hero-buttons{
margin-top:32px;
display:flex;
gap:12px;
}
.hero-img{
height:430px;
position:relative;
overflow:hidden;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface);
}
img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.note{
position:absolute;
left:24px;
right:24px;
bottom:24px;
padding:18px;
border:1px solid rgba(221,217,204,.9);
border-radius:12px;
background:rgba(250,249,245,.92);
}
.note strong{
display:block;
margin-bottom:5px;
font-size:15px;
}
.note span{
color:var(--muted);
font-size:13px;
line-height:1.45;
}
.stats{
height:112px;
display:grid;
grid-template-columns:repeat(4,1fr);
background:var(--surface);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.stat{
padding:24px 28px;
border-right:1px solid var(--border);
}
.stat:last-child{border-right:0}
.stat strong{
display:block;
margin-bottom:8px;
font-size:24px;
line-height:1;
font-variant-numeric:tabular-nums;
}
.stat span{
color:var(--muted);
font-size:13px;
line-height:1.4;
}
.section{
padding:72px 48px;
background:var(--paper);
}
.section.alt{
background:var(--surface);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.section-head{
margin-bottom:28px;
display:flex;
align-items:end;
justify-content:space-between;
gap:32px;
}
.section-head h2{
max-width:560px;
font-size:38px;
line-height:1.08;
}
.section-head p{
max-width:380px;
color:var(--muted);
font-size:15px;
line-height:1.65;
}
.categories{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.category{
min-height:250px;
overflow:hidden;
border:1px solid var(--border);
border-radius:12px;
background:var(--paper);
}
.category img{height:140px}
.category div{padding:20px}
.category h3{
margin-bottom:8px;
font-size:24px;
}
.category p{
color:var(--muted);
font-size:14px;
line-height:1.6;
}
.products{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}
.product-card{
min-height:350px;
overflow:hidden;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface);
}
.product-card img{
height:184px;
border-bottom:1px solid var(--border);
}
.product-card div{padding:18px}
.kicker{
margin-bottom:8px;
color:var(--accent);
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.product-card h3{
margin-bottom:10px;
font-size:21px;
line-height:1.08;
}
.product-card p{
margin-bottom:14px;
color:var(--muted);
font-size:13px;
line-height:1.5;
}
.price{
display:flex;
align-items:center;
justify-content:space-between;
font-weight:800;
font-variant-numeric:tabular-nums;
}
.price a{
color:var(--ink);
text-decoration:none;
border-bottom:1px solid var(--accent);
font-size:13px;
}
.footer{
height:230px;
padding:42px 48px;
display:grid;
grid-template-columns:1.2fr repeat(3,.6fr);
gap:28px;
background:var(--ink);
color:var(--paper);
}
.footer h3{
margin-bottom:12px;
color:var(--paper);
font-size:22px;
}
.footer p,.footer a{
display:block;
margin:0 0 8px;
color:rgba(250,249,245,.68);
font-size:13px;
line-height:1.65;
text-decoration:none;
}
.footer strong{
display:block;
margin-bottom:12px;
color:var(--paper);
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
}
.breadcrumb{
height:58px;
padding:0 48px;
display:flex;
align-items:center;
gap:9px;
border-bottom:1px solid var(--border);
color:var(--muted);
font-size:13px;
background:var(--paper);
}
.breadcrumb a{
color:var(--muted);
text-decoration:none;
}
.detail{
height:650px;
padding:48px;
display:grid;
grid-template-columns:1fr .86fr;
gap:48px;
background:var(--paper);
}
.gallery{
height:554px;
display:grid;
grid-template-columns:96px 1fr;
gap:16px;
}
.thumbs{
display:grid;
grid-template-rows:repeat(4,1fr);
gap:12px;
}
.thumb,.main-img{
overflow:hidden;
border:1px solid var(--border);
border-radius:10px;
background:var(--surface);
}
.main-img{
position:relative;
border-radius:12px;
}
.main-img img{height:554px}
.badge{
position:absolute;
top:18px;
left:18px;
padding:8px 11px;
border:1px solid var(--border);
border-radius:999px;
background:var(--paper);
color:var(--accent);
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.summary{padding-top:8px}
.rating{
margin-bottom:18px;
display:flex;
gap:10px;
align-items:center;
color:var(--muted);
font-size:14px;
}
.stars{color:var(--accent);letter-spacing:1px}
.summary h1{
max-width:580px;
margin-bottom:18px;
font-size:54px;
line-height:1;
}
.summary .copy{
max-width:590px;
margin-bottom:24px;
color:var(--muted);
font-size:16px;
line-height:1.7;
}
.big-price{
margin-bottom:24px;
font-size:28px;
font-weight:800;
font-variant-numeric:tabular-nums;
}
.option{
margin-bottom:22px;
}
.option-label{
margin-bottom:10px;
display:flex;
justify-content:space-between;
font-size:13px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.option-label span:last-child{
color:var(--muted);
font-weight:600;
letter-spacing:0;
text-transform:none;
}
.swatches{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.swatch{
min-height:54px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border);
border-radius:6px;
background:var(--surface);
font-size:13px;
font-weight:750;
}
.swatch.active{
border-color:var(--accent);
background:rgba(212,120,14,.08);
}
.cart-row{
margin:26px 0 22px;
display:grid;
grid-template-columns:132px 1fr;
gap:12px;
}
.qty{
height:50px;
display:flex;
align-items:center;
justify-content:space-around;
border:1px solid var(--border);
border-radius:6px;
background:var(--surface);
font-weight:800;
font-variant-numeric:tabular-nums;
}
.ship{
padding:16px 18px;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface);
color:var(--muted);
font-size:14px;
line-height:1.55;
}
.ship strong{color:var(--ink)}
.tabs{
height:420px;
padding:0 48px 64px;
background:var(--paper);
}
.panel{
overflow:hidden;
border:1px solid var(--border);
border-radius:12px;
background:var(--surface);
}
.tabbar{
height:58px;
display:flex;
border-bottom:1px solid var(--border);
}
.tabbar span{
display:flex;
align-items:center;
padding:0 24px;
border-right:1px solid var(--border);
color:var(--muted);
font-size:13px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.tabbar span.active{
background:var(--paper);
color:var(--ink);
}
.tab-content{
padding:32px;
display:grid;
grid-template-columns:1fr .8fr;
gap:32px;
}
.tab-content h2{
margin-bottom:14px;
font-size:32px;
line-height:1.1;
}
.tab-content p{
color:var(--muted);
font-size:15px;
line-height:1.7;
}
.specs{
overflow:hidden;
border:1px solid var(--border);
border-radius:10px;
background:var(--paper);
}
.spec{
min-height:46px;
display:grid;
grid-template-columns:1fr 1fr;
border-bottom:1px solid var(--border);
font-size:14px;
font-variant-numeric:tabular-nums;
}
.spec:last-child{border-bottom:0}
.spec span{padding:13px 16px}
.spec span:first-child{
border-right:1px solid var(--border);
color:var(--muted);
}
.related{
height:486px;
padding:64px 48px;
border-top:1px solid var(--border);
background:var(--surface);
}
.related h2{
margin-bottom:24px;
font-size:36px;
}
.small-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.small{
min-height:256px;
overflow:hidden;
border:1px solid var(--border);
border-radius:12px;
background:var(--paper);
}
.small img{
height:142px;
border-bottom:1px solid var(--border);
}
.small div{padding:18px}
.small h3{
margin-bottom:8px;
font-size:22px;
}
.small p{
color:var(--muted);
font-size:13px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="card">
<div class="label">Homepage — Resonant Instruments</div>
<div class="clip">
<div class="scale">
<div class="page">
<header class="header">
<a class="brand" href="#">
<span class="mark" aria-hidden="true">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none">
<path d="M9 18.5V5.2L19 3v12.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.6 21c1.99 0 3.6-1.12 3.6-2.5S8.59 16 6.6 16 3 17.12 3 18.5 4.61 21 6.6 21Z" stroke="currentColor" stroke-width="1.8"/>
<path d="M16.4 18.3c1.99 0 3.6-1.12 3.6-2.5s-1.61-2.5-3.6-2.5-3.6 1.12-3.6 2.5 1.61 2.5 3.6 2.5Z" stroke="currentColor" stroke-width="1.8"/>
</svg>
</span>
<span>Resonant</span>
</a>
<nav class="nav" aria-label="Primary navigation">
<a href="#">Guitars</a>
<a href="#">Keys</a>
<a href="#">Drums</a>
<a href="#">Recording</a>
<a href="#">Lessons</a>
</nav>
<div class="actions">
<button class="icon" aria-label="Search">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path d="m21 21-4.35-4.35M10.8 18.1a7.3 7.3 0 1 1 0-14.6 7.3 7.3 0 0 1 0 14.6Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</button>
<a class="button" href="#">Shop now</a>
</div>
</header>
<main>
<section class="hero">
<div>
<p class="eyebrow">New season collection</p>
<h1>Find the instrument that keeps you playing.</h1>
<p class="copy">Explore carefully selected guitars, keyboards, drums, brass, and studio essentials for beginners, working musicians, and lifelong collectors.</p>
<div class="hero-buttons">
<a class="button" href="#">Browse instruments</a>
<a class="button ghost" href="#">Talk to a specialist</a>
</div>
</div>
<div class="hero-img">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=warm+editorial+music+shop+interior+with+acoustic+guitars+piano+and+drum+kit+natural+light" alt="Warm music shop interior with guitars, piano, and drums">
<div class="note">
<strong>Set up before it ships</strong>
<span>Every fretted instrument receives a basic inspection, tuning, and playability check from our in-house team.</span>
</div>
</div>
</section>
<section class="stats" aria-label="Store highlights">
<div class="stat"><strong>1,200+</strong><span>Instruments and accessories in stock</span></div>
<div class="stat"><strong>48 hr</strong><span>Typical dispatch on ready-to-ship items</span></div>
<div class="stat"><strong>30 day</strong><span>Simple returns on most online orders</span></div>
<div class="stat"><strong>4.8/5</strong><span>Average customer service rating</span></div>
</section>
<section class="section alt">
<div class="section-head">
<h2>Shop by the way you make sound.</h2>
<p>Start with the instrument family you know, or discover something new with guidance from players who understand the details.</p>
</div>
<div class="categories">
<article class="category">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=close+up+of+acoustic+and+electric+guitars+on+wooden+stands+warm+studio+lighting" alt="Acoustic and electric guitars on stands">
<div>
<h3>Strings</h3>
<p>Acoustic, electric, bass, ukulele, mandolin, and the parts that keep them stage-ready.</p>
</div>
</article>
<article class="category">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=modern+digital+piano+and+synthesizer+keys+in+a+minimal+music+studio+warm+tones" alt="Digital piano and synthesizer keys">
<div>
<h3>Keys</h3>
<p>Digital pianos, synthesizers, controllers, workstations, and home practice essentials.</p>
</div>
</article>
<article class="category">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=drum+kit+cymbals+and+percussion+instruments+arranged+in+warm+rehearsal+room" alt="Drum kit and percussion instruments">
<div>
<h3>Rhythm</h3>
<p>Acoustic kits, electronic drums, cymbals, hand percussion, sticks, heads, and hardware.</p>
</div>
</article>
</div>
</section>
<section class="section">
<div class="section-head">
<h2>Popular instruments this week.</h2>
<p>Reliable picks with approachable pricing, solid build quality, and enough character to grow with you.</p>
</div>
<div class="products">
<article class="product-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=spruce+top+acoustic+guitar+on+linen+background+product+photography" alt="Spruce top acoustic guitar">
<div>
<p class="kicker">Acoustic guitar</p>
<h3>Orchard OM-42</h3>
<p>Balanced folk body with a solid spruce top and comfortable satin neck.</p>
<p class="price"><span>$649</span><a href="#">View</a></p>
</div>
</article>
<article class="product-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=compact+analog+synthesizer+on+cream+background+product+photography" alt="Compact analog synthesizer">
<div>
<p class="kicker">Synthesizer</p>
<h3>Vale Mono 37</h3>
<p>Warm analog voice with hands-on controls for quick sound shaping.</p>
<p class="price"><span>$529</span><a href="#">View</a></p>
</div>
</article>
<article class="product-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=snare+drum+with+brushed+steel+shell+on+neutral+background+product+photography" alt="Brushed steel snare drum">
<div>
<p class="kicker">Snare drum</p>
<h3>Northline 14×5.5</h3>
<p>Crisp attack and controlled sustain for studio or live work.</p>
<p class="price"><span>$289</span><a href="#">View</a></p>
</div>
</article>
<article class="product-card">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=student+alto+saxophone+on+warm+cream+background+product+photography" alt="Student alto saxophone">
<div>
<p class="kicker">Woodwind</p>
<h3>Arbor Alto Sax</h3>
<p>Responsive student horn with durable keywork and bright tone.</p>
<p class="price"><span>$799</span><a href="#">View</a></p>
</div>
</article>
</div>
</section>
</main>
<footer class="footer">
<div>
<h3>Resonant</h3>
<p>Instruments, accessories, and practical guidance for people building a life around music.</p>
</div>
<div>
<strong>Shop</strong>
<a href="#">Guitars</a>
<a href="#">Keyboards</a>
<a href="#">Drums</a>
</div>
<div>
<strong>Support</strong>
<a href="#">Shipping</a>
<a href="#">Returns</a>
<a href="#">Repairs</a>
</div>
<div>
<strong>Visit</strong>
<p>214 Maple Street<br>Portland, OR</p>
<p>Open Tue–Sun</p>
</div>
</footer>
</div>
</div>
</div>
</div>
<div class="card">
<div class="label">Product Page — Acoustic Guitar</div>
<div class="clip">
<div class="scale">
<div class="page">
<header class="header">
<a class="brand" href="#">
<span class="mark" aria-hidden="true">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none">
<path d="M9 18.5V5.2L19 3v12.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.6 21c1.99 0 3.6-1.12 3.6-2.5S8.59 16 6.6 16 3 17.12 3 18.5 4.61 21 6.6 21Z" stroke="currentColor" stroke-width="1.8"/>
<path d="M16.4 18.3c1.99 0 3.6-1.12 3.6-2.5s-1.61-2.5-3.6-2.5-3.6 1.12-3.6 2.5 1.61 2.5 3.6 2.5Z" stroke="currentColor" stroke-width="1.8"/>
</svg>
</span>
<span>Resonant</span>
</a>
<nav class="nav" aria-label="Primary navigation">
<a href="#">Guitars</a>
<a href="#">Keys</a>
<a href="#">Drums</a>
<a href="#">Recording</a>
<a href="#">Lessons</a>
</nav>
<div class="actions">
<button class="icon" aria-label="Cart">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path d="M6.2 7.5h13.2l-1.4 8.1H7.4L6.2 7.5ZM6.2 7.5 5.8 5H3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 20.2h.01M17 20.2h.01" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
</svg>
</button>
<a class="button" href="#">Checkout</a>
</div>
</header>
<main>
<div class="breadcrumb">
<a href="#">Home</a><span>/</span><a href="#">Guitars</a><span>/</span><span>Orchard OM-42</span>
</div>
<section class="detail">
<div class="gallery">
<div class="thumbs">
<div class="thumb"><img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=acoustic+guitar+front+view+spruce+top+product+photo" alt="Acoustic guitar front view"></div>
<div class="thumb"><img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=acoustic+guitar+side+angle+mahogany+body+product+photo" alt="Acoustic guitar side angle"></div>
<div class="thumb"><img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=acoustic+guitar+headstock+and+tuners+close+up+product+photo" alt="Acoustic guitar headstock close up"></div>
<div class="thumb"><img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=acoustic+guitar+bridge+and+strings+close+up+product+photo" alt="Acoustic guitar bridge close up"></div>
</div>
<div class="main-img">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=premium+spruce+top+orchestra+model+acoustic+guitar+on+warm+cream+background+product+photography" alt="Orchard OM-42 acoustic guitar">
<span class="badge">Best seller</span>
</div>
</div>
<div class="summary">
<div class="rating">
<span class="stars">★★★★★</span>
<span>4.8 from 126 player reviews</span>
</div>
<h1>Orchard OM-42 Acoustic Guitar</h1>
<p class="copy">A balanced orchestra-model acoustic with a solid spruce top, mahogany back and sides, and a satin neck that feels comfortable from the first chord.</p>
<div class="big-price">$649.00</div>
<div class="option">
<div class="option-label">
<span>Finish</span>
<span>Natural satin selected</span>
</div>
<div class="swatches">
<div class="swatch active">Natural</div>
<div class="swatch">Sunburst</div>
<div class="swatch">Walnut</div>
</div>
</div>
<div class="option">
<div class="option-label">
<span>Setup</span>
<span>Included</span>
</div>
<div class="swatches">
<div class="swatch active">Standard</div>
<div class="swatch">Low action</div>
<div class="swatch">Open tuning</div>
</div>
</div>
<div class="cart-row">
<div class="qty"><span>−</span><span>1</span><span>+</span></div>
<a class="button" href="#">Add to cart</a>
</div>
<p class="ship"><strong>Ships ready to play.</strong> Includes padded gig bag, fresh strings, basic setup, and insured delivery. Most orders leave our shop within 48 hours.</p>
</div>
</section>
<section class="tabs">
<div class="panel">
<div class="tabbar">
<span class="active">Details</span>
<span>Specifications</span>
<span>Shipping</span>
</div>
<div class="tab-content">
<div>
<h2>Built for clear chords, warm picking, and everyday writing.</h2>
<p>The Orchard OM-42 is designed as a dependable main acoustic: articulate enough for fingerstyle, full enough for strumming, and comfortable enough for longer rehearsals. Placeholder product text can be replaced with final brand copy, warranty details, and care instructions.</p>
</div>
<div class="specs" aria-label="Product specifications">
<div class="spec"><span>Body shape</span><span>Orchestra model</span></div>
<div class="spec"><span>Top wood</span><span>Solid spruce</span></div>
<div class="spec"><span>Back / sides</span><span>Mahogany</span></div>
<div class="spec"><span>Scale length</span><span>25.4 in</span></div>
<div class="spec"><span>Nut width</span><span>1.75 in</span></div>
<div class="spec"><span>Included</span><span>Gig bag</span></div>
</div>
</div>
</div>
</section>
<section class="related">
<h2>You may also need</h2>
<div class="small-grid">
<article class="small">
<img src="/api/projects/proj_2y2i3m14434l5u/images?prompt=bronze+acoustic+guitar+strings+pack+on+cream+background+product+photo" alt="Acoustic guitar strings">
<div><h3>Bronze Strings</h3><p>Bright, balanced replacement strings for regular practice and performance.</p></div>
</article>
<article class
Idle
The latest HTML artifact appears here.