← back to Dw Marketing Reels
auto-save: 2026-07-30T14:18:43 (2 files) — public/collections/graduate-collection.html public/collections/graduate-collection.html.bak
bda7ca94a0dda517df8da10d2a9d236bfaacd61d · 2026-07-30 14:18:49 -0700 · Steve Abrams
Files touched
M public/collections/graduate-collection.htmlA public/collections/graduate-collection.html.bak
Diff
commit bda7ca94a0dda517df8da10d2a9d236bfaacd61d
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Jul 30 14:18:49 2026 -0700
auto-save: 2026-07-30T14:18:43 (2 files) — public/collections/graduate-collection.html public/collections/graduate-collection.html.bak
---
public/collections/graduate-collection.html | 12 +--
public/collections/graduate-collection.html.bak | 126 ++++++++++++++++++++++++
2 files changed, 132 insertions(+), 6 deletions(-)
diff --git a/public/collections/graduate-collection.html b/public/collections/graduate-collection.html
index c013ca1..15642c4 100644
--- a/public/collections/graduate-collection.html
+++ b/public/collections/graduate-collection.html
@@ -40,13 +40,13 @@
.dw-vctl input[type=range]{ width:92px; accent-color:#b08212; }
.dw-vctl .v{ width:36px; text-align:right; opacity:.9; }
/* social icons overlaid on the video, bottom-right (static, always visible) */
- .dw-vshare{ position:absolute; right:12px; bottom:54px; z-index:5; display:flex; gap:8px;
+ .dw-vlinks{ position:absolute; right:12px; bottom:54px; z-index:5; display:flex; gap:8px;
background:rgba(20,16,12,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
padding:6px 9px; border-radius:22px; }
- .dw-vshare a{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
+ .dw-vlinks a{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
border-radius:50%; color:#fff; background:rgba(255,255,255,.10); text-decoration:none; transition:.15s; }
- .dw-vshare a:hover{ background:var(--gold); }
- .dw-vshare svg{ width:15px; height:15px; fill:currentColor; }
+ .dw-vlinks a:hover{ background:var(--gold); }
+ .dw-vlinks svg{ width:15px; height:15px; fill:currentColor; }
.cta{ text-align:center; padding:34px 24px 8px; }
.cta a{ display:inline-block; text-transform:uppercase; letter-spacing:2px; font-size:13px; color:#fff;
@@ -81,7 +81,7 @@
<div class="dw-vctl">
<label><span class="k">Speed</span><input type="range" class="dw-speed" min="0.25" max="2" step="0.05" value="1"><span class="v dw-speed-v">1×</span></label>
</div>
- <div class="dw-vshare">
+ <div class="dw-vlinks">
<a class="dw-dl" href="/reels/graduate-collection-flipbook.mp4" download title="Download video"><svg viewBox="0 0 24 24"><path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4 6.3 11.7l1.4-1.4L11 13.6V3h1zM5 19h14v2H5z"/></svg></a>
<a class="dw-fb" target="_blank" rel="noopener" title="Share on Facebook"><svg viewBox="0 0 24 24"><path d="M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.5-1.5H16V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 3.9V11H7.5v3H10v8h3z"/></svg></a>
<a class="dw-x" target="_blank" rel="noopener" title="Share on X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-6.7L6 22H2.9l7.5-8.6L2 2h6.6l4.5 6.1L18.9 2zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20z"/></svg></a>
@@ -115,7 +115,7 @@
</div>
<div class="cta">
- <a href="https://www.designerwallcoverings.com/collections/vendors?q=Graduate%20Collection%20UK">Shop the Graduate Collection →</a>
+ <a href="https://www.designerwallcoverings.com/collections/the-graduate-collection">Shop the Graduate Collection →</a>
</div>
<footer>
diff --git a/public/collections/graduate-collection.html.bak b/public/collections/graduate-collection.html.bak
new file mode 100644
index 0000000..c013ca1
--- /dev/null
+++ b/public/collections/graduate-collection.html.bak
@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Graduate Collection — Designer Wallcoverings</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+<style>
+ :root{ --ink:#111; --body:#444; --canvas:#fff; --gold:#b08212; --line:#e7e2d8; }
+ *{ box-sizing:border-box; margin:0; padding:0; }
+ body{ font-family:'Lora',Georgia,serif; color:var(--body); background:var(--canvas); -webkit-font-smoothing:antialiased; }
+
+ /* ---- collection banner ---- */
+ .banner{ position:relative; height:50vh; display:flex; flex-direction:column;
+ align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
+ .banner .bg{ position:absolute; inset:0; background-image:url('/public/collections/graduate-banner.jpg');
+ background-size:cover; background-position:center; transform:scale(1.03); }
+ .banner .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,12,.42),rgba(20,16,12,.62)); }
+ .banner .inner{ position:relative; padding:0 24px; }
+ .banner .kicker{ text-transform:uppercase; letter-spacing:5px; font-size:13px; color:#e7d8bd; margin-bottom:16px; }
+ .banner h1{ font-weight:400; font-size:clamp(34px,6vw,64px); line-height:1.08; letter-spacing:.5px; text-shadow:0 2px 22px rgba(0,0,0,.5); }
+ .banner .sub{ margin-top:14px; font-size:clamp(15px,2.2vw,19px); font-style:italic; color:#f3ece0; }
+ .banner .rule{ width:52px; height:1px; background:var(--gold); margin:20px auto 0; }
+
+ /* ---- flip book, directly below the banner ---- */
+ .wrap{ max-width:1100px; margin:0 auto; padding:44px 24px 8px; }
+ .section-label{ text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--gold);
+ margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line); text-align:center; }
+ .film{ position:relative; }
+ .film video{ width:100%; border-radius:8px; background:#14110e; display:block; box-shadow:0 10px 40px rgba(0,0,0,.18); }
+ .film .note{ text-align:center; margin-top:14px; font-size:14px; font-style:italic; color:var(--body); }
+ .film .note b{ color:var(--ink); font-style:normal; }
+ .dw-vctl{ position:absolute; left:12px; bottom:54px; z-index:5; display:flex; flex-direction:column; gap:5px;
+ background:rgba(20,16,12,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
+ padding:7px 11px; border-radius:7px; font:600 11px/1 -apple-system,system-ui,sans-serif; color:#fff; }
+ .dw-vctl label{ display:flex; align-items:center; gap:7px; }
+ .dw-vctl .k{ width:38px; text-transform:uppercase; letter-spacing:.1em; opacity:.8; }
+ .dw-vctl input[type=range]{ width:92px; accent-color:#b08212; }
+ .dw-vctl .v{ width:36px; text-align:right; opacity:.9; }
+ /* social icons overlaid on the video, bottom-right (static, always visible) */
+ .dw-vshare{ position:absolute; right:12px; bottom:54px; z-index:5; display:flex; gap:8px;
+ background:rgba(20,16,12,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
+ padding:6px 9px; border-radius:22px; }
+ .dw-vshare a{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
+ border-radius:50%; color:#fff; background:rgba(255,255,255,.10); text-decoration:none; transition:.15s; }
+ .dw-vshare a:hover{ background:var(--gold); }
+ .dw-vshare svg{ width:15px; height:15px; fill:currentColor; }
+
+ .cta{ text-align:center; padding:34px 24px 8px; }
+ .cta a{ display:inline-block; text-transform:uppercase; letter-spacing:2px; font-size:13px; color:#fff;
+ background:var(--ink); padding:14px 30px; border-radius:2px; text-decoration:none; }
+ .cta a:hover{ background:var(--gold); }
+
+ footer{ text-align:center; padding:52px 24px 72px; border-top:1px solid var(--line); margin-top:44px; }
+ footer .mark{ text-transform:uppercase; letter-spacing:5px; color:var(--ink); font-size:15px; }
+ footer a{ color:var(--gold); text-decoration:none; letter-spacing:1px; font-size:14px; display:inline-block; margin-top:10px; }
+</style>
+</head>
+<body>
+ <!-- COLLECTION BANNER -->
+ <header class="banner">
+ <div class="bg"></div>
+ <div class="scrim"></div>
+ <div class="inner">
+ <div class="kicker">Designer Wallcoverings · London</div>
+ <h1>Graduate Collection</h1>
+ <div class="sub">Maximalist British wallpaper — leopards, portraits, stags & moonlight.</div>
+ <div class="rule"></div>
+ </div>
+ </header>
+
+ <!-- FLIP BOOK, directly below the banner -->
+ <div class="wrap">
+ <div class="section-label">The Flip Book · narrated</div>
+ <div class="film">
+ <video controls playsinline preload="metadata" poster="/public/collections/graduate-poster.jpg">
+ <source src="/reels/graduate-collection-flipbook.mp4" type="video/mp4">
+ </video>
+ <div class="dw-vctl">
+ <label><span class="k">Speed</span><input type="range" class="dw-speed" min="0.25" max="2" step="0.05" value="1"><span class="v dw-speed-v">1×</span></label>
+ </div>
+ <div class="dw-vshare">
+ <a class="dw-dl" href="/reels/graduate-collection-flipbook.mp4" download title="Download video"><svg viewBox="0 0 24 24"><path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4 6.3 11.7l1.4-1.4L11 13.6V3h1zM5 19h14v2H5z"/></svg></a>
+ <a class="dw-fb" target="_blank" rel="noopener" title="Share on Facebook"><svg viewBox="0 0 24 24"><path d="M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.5-1.5H16V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 3.9V11H7.5v3H10v8h3z"/></svg></a>
+ <a class="dw-x" target="_blank" rel="noopener" title="Share on X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-6.7L6 22H2.9l7.5-8.6L2 2h6.6l4.5 6.1L18.9 2zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20z"/></svg></a>
+ <a class="dw-pin" target="_blank" rel="noopener" title="Share on Pinterest"><svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 4 5.6 4 8.7c0 1.9.7 3.5 2.3 4.1.3.1.5 0 .5-.3l.2-.8c.1-.3 0-.4-.2-.6-.4-.5-.7-1.1-.7-2 0-2.6 1.9-4.9 5-4.9 2.7 0 4.2 1.7 4.2 3.9 0 2.9-1.3 5.4-3.2 5.4-1 0-1.8-.9-1.6-1.9.3-1.3.9-2.6.9-3.5 0-.8-.4-1.5-1.3-1.5-1.1 0-1.9 1.1-1.9 2.6 0 .9.3 1.6.3 1.6s-1.1 4.5-1.3 5.3c-.4 1.6-.1 3.5 0 3.7 0 .1.2.2.3.1.1-.2 1.6-2 2.1-3.8l.8-3c.4.8 1.5 1.4 2.7 1.4 3.6 0 6-3.2 6-7.6C18.3 4.8 15.5 2 12 2z"/></svg></a>
+ <a class="dw-li" target="_blank" rel="noopener" title="Share on LinkedIn"><svg viewBox="0 0 24 24"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2 1.4-2 2.8V21H9z"/></svg></a>
+ <a class="dw-mail" title="Share by email"><svg viewBox="0 0 24 24"><path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7L4 6.8V18h16V6.8L12 12z"/></svg></a>
+ </div>
+ </div>
+ <div class="note">🔊 <b>Sound on</b> — leaf through all 55 patterns, narrated in Steve Abrams' voice.</div>
+ <script>
+ (function(){
+ var page="https://www.designerwallcoverings.com/collections/the-graduate-collection";
+ var media="https://marketing.designerwallcoverings.com/public/collections/graduate-poster.jpg";
+ var txt="The Graduate Collection — a maximalist British wallpaper lookbook, page by page.";
+ var e=encodeURIComponent;
+ var q=function(s){return document.querySelector(s);};
+ if(q('.dw-fb')) q('.dw-fb').href="https://www.facebook.com/sharer/sharer.php?u="+e(page);
+ if(q('.dw-x')) q('.dw-x').href="https://twitter.com/intent/tweet?url="+e(page)+"&text="+e(txt);
+ if(q('.dw-pin')) q('.dw-pin').href="https://pinterest.com/pin/create/button/?url="+e(page)+"&media="+e(media)+"&description="+e(txt);
+ if(q('.dw-li')) q('.dw-li').href="https://www.linkedin.com/sharing/share-offsite/?url="+e(page);
+ if(q('.dw-mail')) q('.dw-mail').href="mailto:?subject="+e("The Graduate Collection")+"&body="+e(txt+" "+page);
+ document.querySelectorAll('.dw-vctl').forEach(function(ctl){
+ var v=ctl.parentElement.querySelector('video'); if(!v)return;
+ var sp=ctl.querySelector('.dw-speed'), spv=ctl.querySelector('.dw-speed-v');
+ if(!sp)return;
+ function us(){v.playbackRate=parseFloat(sp.value);spv.textContent=(Math.round(parseFloat(sp.value)*100)/100)+'×';}
+ sp.addEventListener('input',us); us();
+ });
+ })();
+ </script>
+ </div>
+
+ <div class="cta">
+ <a href="https://www.designerwallcoverings.com/collections/vendors?q=Graduate%20Collection%20UK">Shop the Graduate Collection →</a>
+ </div>
+
+ <footer>
+ <div class="mark">Designer Wallcoverings</div>
+ <a href="https://designerwallcoverings.com">designerwallcoverings.com →</a>
+ </footer>
+</body>
+</html>
← b5e457e auto-save: 2026-07-30T13:48:32 (3 files) — theme-edits/gradu
·
back to Dw Marketing Reels
·
chore: gitignore *.bak + untrack stray graduate-collection.h e2a5719 →