2RE03-Design/case-studies/victoria-fuller.html

127 lines
6.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="icon" href="../img/favicon.svg" type="image/svg+xml">
<link rel="icon" href="../img/favicon.ico">
<link rel="apple-touch-icon" href="../img/apple-touch-icon.png">
<link rel="canonical" href="https://2re03.com/case-studies/victoria-fuller.html">
<meta property="og:type" content="website">
<meta property="og:site_name" content="2RE03">
<meta property="og:title" content="Victoria Fuller | Case Study | 2RE03">
<meta property="og:description" content="Victoria Fuller case study: Web Design by 2RE03.">
<meta property="og:url" content="https://2re03.com/case-studies/victoria-fuller.html">
<meta property="og:image" content="https://2re03.com/img/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The 2RE03 wordmark on a green dot-grid card reading &quot;A design team for the web, and everything around it.&quot;, above a strip of recent work under a green wash.">
<meta name="twitter:card" content="summary_large_image">
<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>