← back to Dw Theme Frontpage Cta
preview-category-banners.html
50 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>DW Front Page — Category Banners preview (TK-10344)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<style>
:root{ font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
*{ box-sizing:border-box; } body{ margin:0; background:#faf9f7; color:#26241f; }
.note{ padding:14px 20px; background:#26241f; color:#f5efe2; font-size:13px; letter-spacing:.3px; }
.note b{ color:#e4c88a; }
/* mirrors sections/category-banner.liquid */
.cb{ position:relative; min-height:460px; display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center; gap:16px; padding:64px 24px; isolation:isolate;
background-position:center; background-size:cover; background-repeat:no-repeat; text-decoration:none; }
.cb::before{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(rgba(30,25,18,.35),rgba(30,25,18,.62)); }
.cb .ey{ font-size:13px; letter-spacing:4px; font-weight:600; color:#e4c88a; margin:0; text-transform:uppercase; }
.cb h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(34px,5vw,64px);
line-height:1.04; color:#fff; margin:0; max-width:760px; }
.cb p{ color:#fff; opacity:.9; font-size:16px; max-width:520px; margin:0; }
.cb .cta{ margin-top:8px; display:inline-block; background:#fff; color:#26241f; border-radius:999px;
padding:15px 34px; font-size:13px; font-weight:600; letter-spacing:1.5px; }
@media(max-width:749px){ .cb{ min-height:331px; padding:48px 20px; } }
</style></head><body>
<div class="note">Preview of <b>7 stacked category banners</b> for the DW front page — section <b>category-banner.liquid</b> · ticket <b>TK-10344</b>. Static replica of the live section CSS; backgrounds are real DW catalog product photos. Live theme push is gated to Steve.</div>
<a class="cb" href="/collections/new-arrivals" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/mr-abh-1177-Maya_Romanoff_3.jpg')">
<span class="ey">Just In</span><h2>New Arrivals</h2><p>The season's latest luxury walls & fabrics.</p><span class="cta">SHOP NEW ARRIVALS</span></a>
<a class="cb" href="/pages/brands" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/f8cbc26a36d5ca41dd242a4bba0a246c.jpg')">
<span class="ey">The Houses</span><h2>Brands</h2><p>The world's most coveted wallcovering houses, in one place.</p><span class="cta">EXPLORE BRANDS</span></a>
<a class="cb" href="/pages/collections" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/products/768728c53535e9159f8a0d9b0115ec64.jpg')">
<span class="ey">Curated</span><h2>Collections</h2><p>Signature collections, hand-picked by our designers.</p><span class="cta">BROWSE COLLECTIONS</span></a>
<a class="cb" href="/pages/designer-wallpaper-styles" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/products/ScreenShot2022-06-15at2.26.33PM.png')">
<span class="ey">Find Your Look</span><h2>Styles</h2><p>From traditional damask to bold modern geometrics.</p><span class="cta">SHOP BY STYLE</span></a>
<a class="cb" href="/pages/commercial-wallcoverings" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/c2acf0647337dfa933dadf4f1aea2f3c.jpg')">
<span class="ey">Contract Grade</span><h2>Commercial</h2><p>Type II vinyl, acoustic & durable surfaces for every project.</p><span class="cta">SHOP COMMERCIAL</span></a>
<a class="cb" href="/pages/shop-by-color" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/AT23109.jpg')">
<span class="ey">Shop By Hue</span><h2>Color</h2><p>Every shade, from oatmeal to emerald.</p><span class="cta">SHOP BY COLOR</span></a>
<a class="cb" href="/pages/shop-by-material" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/ZW146-01-magentite-wallcovering-goldsand_01.jpg')">
<span class="ey">Shop By Texture</span><h2>Material</h2><p>Grasscloth, silk, cork, glass bead & more.</p><span class="cta">SHOP BY MATERIAL</span></a>
<div class="note">End of preview · 7 banners · New Arrivals reuses the existing section; the other 6 are new <b>category-banner</b> placements.</div>
</body></html>