← back to Dw Marketing Reels
public/collections/graduate-collection.html
127 lines
<!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-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-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-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;
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-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>
<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/the-graduate-collection">Shop the Graduate Collection →</a>
</div>
<footer>
<div class="mark">Designer Wallcoverings</div>
<a href="https://designerwallcoverings.com">designerwallcoverings.com →</a>
</footer>
</body>
</html>