2RE03-Design/case-studies/victoria-fuller.html
2RE 67a4cead97 Optimise all images to WebP: img/ 20 MB down to 3.2 MB
45 images converted with cwebp (long side capped at 1600px; -q 82, or -q 90 -alpha_q 100 when transparent) and 97 references repointed across 13 HTML files. printtiresad.png stays PNG because every WebP encode of it came out larger. Verified: 0 missing references, 0 unreferenced files, all 45 WebP files decode, all 16 pages balance and serve 200, and the before/after width/height ratio-hint sets are identical. NOTE: the published site must be redeployed for the new assets to go live.
2026-09-10 19:44:17 +08:00

113 lines
5.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Victoria Fuller | Case Study | 2RE03</title>
<meta name="description" content="Victoria Fuller case study: Web Design by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-victoria-fuller.webp'); --hero-position: center 10%">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
<h1>Victoria Fuller</h1>
<p class="hero-lead mb-0">A website for Victoria Fuller, a Playboy Bunny, and the only one with the rights to use the Playboy logo.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/webvictoria.webp" alt="Victoria Fuller web design project" width="1600" height="983">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>A story this specific needs room to breathe. Victoria Fuller is a Playboy Bunny and the only one with the rights to use the Playboy logo, but the material was buried and the structure wasn't
helping. Visitors had to work to find the point, and the design competed with the content instead of
serving it.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Content hierarchy and page structure</li>
<li>Responsive, hand-coded layout</li>
<li>Type and color system</li>
<li>Performance and accessibility passes</li>
</ul>
<a class="btn btn-outline-brand mt-2" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>