mirror of
https://github.com/mileswolfallen2/miles-web.git
synced 2026-09-08 11:23:17 +00:00
528 lines
11 KiB
HTML
528 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Miles Wolf Allen | Developer & 3D Artist</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=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--cream: #f5f0e8;
|
|
--black: #111111;
|
|
--yellow: #f6e548;
|
|
--pink: #ff6ca8;
|
|
--blue: #9fd9ff;
|
|
--orange: #ff7147;
|
|
--border: 2px solid var(--black);
|
|
--shadow: 6px 6px 0 var(--black);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background: var(--cream);
|
|
color: var(--black);
|
|
font-family: "Space Grotesk", sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.container {
|
|
width: min(1180px, calc(100% - 40px));
|
|
margin: auto;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24px 0;
|
|
border-bottom: var(--border);
|
|
font-family: "DM Mono", monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
nav ul {
|
|
display: flex;
|
|
gap: 26px;
|
|
list-style: none;
|
|
}
|
|
|
|
nav a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hero {
|
|
min-height: 770px;
|
|
display: grid;
|
|
grid-template-columns: 1.2fr .8fr;
|
|
align-items: center;
|
|
gap: 40px;
|
|
position: relative;
|
|
padding: 100px 0 130px;
|
|
}
|
|
|
|
.eyebrow {
|
|
font-family: "DM Mono", monospace;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 800px;
|
|
font-size: clamp(68px, 10vw, 150px);
|
|
line-height: .82;
|
|
letter-spacing: -9px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: 430px;
|
|
margin-top: 38px;
|
|
font-size: 20px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
margin-top: 32px;
|
|
padding: 16px 22px;
|
|
border: var(--border);
|
|
background: var(--yellow);
|
|
box-shadow: var(--shadow);
|
|
font-family: "DM Mono", monospace;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
transition: .2s ease;
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translate(4px, 4px);
|
|
box-shadow: 2px 2px 0 var(--black);
|
|
}
|
|
|
|
.sticker {
|
|
position: absolute;
|
|
top: 130px;
|
|
right: 4%;
|
|
width: 150px;
|
|
height: 150px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
background: var(--pink);
|
|
border: var(--border);
|
|
transform: rotate(12deg);
|
|
font-weight: 700;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.hero-art {
|
|
min-height: 450px;
|
|
border: var(--border);
|
|
background:
|
|
linear-gradient(135deg, transparent 35%, var(--black) 36% 39%, transparent 40%),
|
|
var(--blue);
|
|
box-shadow: var(--shadow);
|
|
position: relative;
|
|
transform: rotate(3deg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-art::before {
|
|
content: "MAKE IT MATTER";
|
|
position: absolute;
|
|
top: 28%;
|
|
left: -12%;
|
|
width: 130%;
|
|
padding: 18px;
|
|
background: var(--orange);
|
|
border-block: var(--border);
|
|
font-size: clamp(28px, 4vw, 56px);
|
|
font-weight: 700;
|
|
letter-spacing: -3px;
|
|
transform: rotate(-14deg);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hero-art::after {
|
|
content: "✳";
|
|
position: absolute;
|
|
right: 15%;
|
|
bottom: 12%;
|
|
font-size: 130px;
|
|
}
|
|
|
|
.marquee {
|
|
border-block: var(--border);
|
|
background: var(--black);
|
|
color: var(--cream);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
padding: 14px 0;
|
|
font-size: 22px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.marquee span {
|
|
display: inline-block;
|
|
animation: move 18s linear infinite;
|
|
}
|
|
|
|
@keyframes move {
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
|
|
section {
|
|
padding: 120px 0;
|
|
}
|
|
|
|
.section-label {
|
|
font-family: "DM Mono", monospace;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.intro {
|
|
max-width: 880px;
|
|
font-size: clamp(36px, 6vw, 78px);
|
|
line-height: .95;
|
|
letter-spacing: -4px;
|
|
}
|
|
|
|
.services {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.card {
|
|
min-height: 370px;
|
|
padding: 26px;
|
|
border: var(--border);
|
|
box-shadow: var(--shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card:nth-child(1) { background: var(--yellow); }
|
|
.card:nth-child(2) { background: var(--pink); }
|
|
.card:nth-child(3) { background: var(--blue); }
|
|
|
|
.card-number {
|
|
font-family: "DM Mono", monospace;
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 34px;
|
|
line-height: .95;
|
|
letter-spacing: -2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.card p {
|
|
font-size: 17px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.work {
|
|
background: var(--orange);
|
|
border-block: var(--border);
|
|
}
|
|
|
|
.work-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 22px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.project {
|
|
min-height: 310px;
|
|
padding: 25px;
|
|
border: var(--border);
|
|
background: var(--cream);
|
|
box-shadow: var(--shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.project:nth-child(2) { background: var(--blue); }
|
|
.project:nth-child(3) { background: var(--pink); }
|
|
.project:nth-child(4) { background: var(--yellow); }
|
|
|
|
.project h3 {
|
|
font-size: 42px;
|
|
letter-spacing: -3px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.project p {
|
|
font-family: "DM Mono", monospace;
|
|
font-size: 13px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.testimonial {
|
|
max-width: 900px;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
blockquote {
|
|
font-size: clamp(32px, 5vw, 65px);
|
|
line-height: .98;
|
|
letter-spacing: -3px;
|
|
}
|
|
|
|
cite {
|
|
display: block;
|
|
margin-top: 28px;
|
|
font-family: "DM Mono", monospace;
|
|
font-size: 13px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.contact {
|
|
background: var(--black);
|
|
color: var(--cream);
|
|
text-align: center;
|
|
}
|
|
|
|
.contact h2 {
|
|
max-width: 900px;
|
|
margin: auto;
|
|
font-size: clamp(56px, 10vw, 140px);
|
|
line-height: .82;
|
|
letter-spacing: -8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.contact .button {
|
|
color: var(--black);
|
|
margin-top: 50px;
|
|
}
|
|
|
|
footer {
|
|
padding: 25px 0;
|
|
background: var(--black);
|
|
color: var(--cream);
|
|
border-top: 1px solid #555;
|
|
font-family: "DM Mono", monospace;
|
|
font-size: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
nav ul {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
display: block;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
h1 {
|
|
letter-spacing: -5px;
|
|
}
|
|
|
|
.sticker {
|
|
top: 34px;
|
|
right: 0;
|
|
width: 105px;
|
|
height: 105px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hero-art {
|
|
margin: 70px 12px 0 0;
|
|
min-height: 330px;
|
|
}
|
|
|
|
section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.services,
|
|
.work-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.card {
|
|
min-height: 300px;
|
|
}
|
|
|
|
footer {
|
|
display: block;
|
|
line-height: 2;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<nav>
|
|
<a href="#" class="logo">LOUD®</a>
|
|
|
|
<ul>
|
|
<li><a href="#services">Services</a></li>
|
|
<li><a href="#work">Work</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div>
|
|
<p class="eyebrow">Independent brand strategy & copywriting</p>
|
|
<h1>Words that refuse to whisper.</h1>
|
|
<p class="hero-copy">
|
|
I help ambitious brands find their voice, sharpen their message,
|
|
and turn casual attention into meaningful action.
|
|
</p>
|
|
<a href="#contact" class="button">Start a conversation ↗</a>
|
|
</div>
|
|
|
|
<div class="hero-art" aria-hidden="true"></div>
|
|
<div class="sticker">Good brands<br>have opinions</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<div class="marquee">
|
|
<span>
|
|
Strategy ✳ Positioning ✳ Copywriting ✳ Messaging ✳ Strategy ✳ Positioning ✳ Copywriting ✳ Messaging ✳
|
|
</span>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<section id="services">
|
|
<p class="section-label">01 / What I do</p>
|
|
|
|
<p class="intro">
|
|
Your brand does not need more content. It needs a clearer point of view.
|
|
</p>
|
|
|
|
<div class="services">
|
|
<article class="card">
|
|
<span class="card-number">01</span>
|
|
<h3>Message<br>Reset</h3>
|
|
<p>
|
|
Find the sharpest version of what you do, who it is for, and why
|
|
anyone should care.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<span class="card-number">02</span>
|
|
<h3>Conversion<br>Copy</h3>
|
|
<p>
|
|
Websites, landing pages, emails, product pages, and campaigns that
|
|
make the next step obvious.
|
|
</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<span class="card-number">03</span>
|
|
<h3>Fractional<br>Creative Lead</h3>
|
|
<p>
|
|
Senior-level thinking for teams that need direction, momentum, and
|
|
someone willing to challenge the safe idea.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="work" id="work">
|
|
<div class="container">
|
|
<p class="section-label">02 / Selected work</p>
|
|
|
|
<div class="work-grid">
|
|
<article class="project">
|
|
<h3>Northstar</h3>
|
|
<p>Brand positioning / Website copy</p>
|
|
</article>
|
|
|
|
<article class="project">
|
|
<h3>Good Goods</h3>
|
|
<p>Messaging system / Product launch</p>
|
|
</article>
|
|
|
|
<article class="project">
|
|
<h3>Orbit</h3>
|
|
<p>Campaign concept / Conversion copy</p>
|
|
</article>
|
|
|
|
<article class="project">
|
|
<h3>Fieldwork</h3>
|
|
<p>Brand voice / Content direction</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<section>
|
|
<div class="testimonial">
|
|
<blockquote>
|
|
“They turned a complicated offer into a message our customers
|
|
understood immediately.”
|
|
</blockquote>
|
|
<cite>— Jamie Lee, Founder at Northstar</cite>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="contact" id="contact">
|
|
<div class="container">
|
|
<h2>Make your brand impossible to ignore.</h2>
|
|
<a href="mailto:[email protected]" class="button">
|
|
[email protected] ↗
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<span>© 2026 mileswolf allen
|
|
|
|
</span>
|
|
<span>Built with intent, not templates.</span>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|