195 lines
6.8 KiB
HTML
195 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>The Founder's Break - printable flyer</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=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* The Founder's Break - US Letter flyer.
|
|
Composed as a drafting sheet: a thin frame, registration ticks, the break
|
|
drawing bleeding off the right edge, and a real title block along the
|
|
bottom carrying venue, address, admission and the RSVP code. The title
|
|
block is the concept rather than decoration, which is what keeps this from
|
|
being four centred boxes stacked down a column.
|
|
|
|
White paper on purpose: a full-bleed dark flyer drinks toner and collapses
|
|
to a solid block on the mono laser printers in most campus libraries.
|
|
Corners are sharp everywhere, matching the drawing language. */
|
|
|
|
@page { size: 8.5in 11in; margin: 0; }
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--ink: #06060b;
|
|
--accent: #047857; /* deeper than the screen emerald so it holds in ink */
|
|
--hair: #c9c8d2;
|
|
--muted: #5a5870;
|
|
--frame: 0.34in;
|
|
}
|
|
|
|
html, body { width: 8.5in; height: 11in; }
|
|
body {
|
|
font-family: "Inter", -apple-system, system-ui, sans-serif;
|
|
color: var(--ink); background: #fff;
|
|
-webkit-print-color-adjust: exact; print-color-adjust: exact;
|
|
}
|
|
|
|
.sheet { position: relative; width: 8.5in; height: 11in; overflow: hidden; }
|
|
|
|
/* ── Drafting frame + registration ticks ── */
|
|
.frame {
|
|
position: absolute; inset: var(--frame);
|
|
border: 1px solid var(--ink); pointer-events: none;
|
|
}
|
|
.tick { position: absolute; background: var(--ink); }
|
|
.tick.h { width: 0.3in; height: 1px; }
|
|
.tick.v { width: 1px; height: 0.3in; }
|
|
|
|
/* ── The drawing, cropped by the sheet edge ── */
|
|
.drawing {
|
|
position: absolute; top: 1.95in; right: -2.85in;
|
|
width: 9.5in; opacity: 0.46;
|
|
}
|
|
.drawing img { width: 100%; height: auto; display: block; }
|
|
|
|
/* ── Content column, held clear of the drawing ── */
|
|
.body {
|
|
position: absolute; inset: var(--frame);
|
|
padding: 0.42in 0.46in 1.8in;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
|
|
.kicker {
|
|
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
font-size: 8.5pt; letter-spacing: 0.19em; text-transform: uppercase;
|
|
color: var(--accent); font-weight: 500;
|
|
}
|
|
|
|
h1 {
|
|
font-family: "Space Grotesk", sans-serif;
|
|
font-size: 64pt; font-weight: 700; line-height: 0.85;
|
|
letter-spacing: -0.042em; margin-top: 0.2in;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* The loudest thing after the name. A flyer is read at ten feet and the day
|
|
is the one fact someone has to walk away with. */
|
|
.when { margin-top: 0.44in; }
|
|
.when span {
|
|
display: block;
|
|
font-family: "Space Grotesk", sans-serif;
|
|
font-size: 37pt; font-weight: 700; line-height: 1.02;
|
|
letter-spacing: -0.022em; text-transform: uppercase;
|
|
}
|
|
.when .time { color: var(--accent); }
|
|
|
|
.say { margin-top: auto; max-width: 4.6in; }
|
|
.say .lead {
|
|
font-family: "Space Grotesk", sans-serif;
|
|
font-size: 16.5pt; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
|
|
}
|
|
.say p { margin-top: 0.13in; font-size: 11pt; line-height: 1.5; color: var(--muted); }
|
|
|
|
/* ── Title block ── */
|
|
.title-block {
|
|
position: absolute; left: var(--frame); right: var(--frame); bottom: var(--frame);
|
|
border-top: 1px solid var(--ink);
|
|
display: grid; grid-template-columns: 1.66in 1fr 1.02in 1.6in;
|
|
height: 1.58in; background: #fff;
|
|
}
|
|
.cell { padding: 0.14in 0.15in; }
|
|
.cell + .cell { border-left: 1px solid var(--hair); }
|
|
.cell dt {
|
|
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
font-size: 7pt; letter-spacing: 0.16em; text-transform: uppercase;
|
|
color: var(--muted); margin-bottom: 0.07in;
|
|
}
|
|
.cell dd {
|
|
font-family: "Space Grotesk", sans-serif;
|
|
font-size: 12.5pt; font-weight: 600; line-height: 1.25;
|
|
}
|
|
.cell dd span {
|
|
display: block; font-family: "Inter", sans-serif;
|
|
font-size: 9.5pt; font-weight: 400; color: var(--muted); margin-top: 0.04in; line-height: 1.35;
|
|
}
|
|
|
|
.venue-cell { display: flex; flex-direction: column; }
|
|
.venue-cell img { height: 0.82in; width: auto; align-self: flex-start; }
|
|
|
|
.free { font-size: 19pt !important; letter-spacing: -0.02em; }
|
|
|
|
.qr-cell { display: flex; align-items: center; gap: 0.12in; }
|
|
.qr-cell img { width: 1.04in; height: 1.04in; display: block; }
|
|
.qr-cell .qr-text {
|
|
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
font-size: 7pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
|
|
writing-mode: vertical-rl; transform: rotate(180deg);
|
|
}
|
|
|
|
/* Credit line, sitting under the frame like a sheet reference. */
|
|
.credit {
|
|
position: absolute; left: var(--frame); right: var(--frame);
|
|
bottom: 0.115in;
|
|
display: flex; justify-content: space-between;
|
|
font-family: "JetBrains Mono", ui-monospace, monospace;
|
|
font-size: 7.5pt; letter-spacing: 0.1em; color: var(--muted);
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
|
|
<div class="drawing"><img src="flyer-diagram.png" alt=""></div>
|
|
|
|
<div class="frame"></div>
|
|
<div class="tick h" style="top: 0.34in; left: 0;"></div>
|
|
<div class="tick h" style="top: 0.34in; right: 0;"></div>
|
|
<div class="tick v" style="left: 0.34in; top: 0;"></div>
|
|
<div class="tick v" style="right: 0.34in; top: 0;"></div>
|
|
|
|
<div class="body">
|
|
<p class="kicker">UF Startup Pool Social / Gainesville</p>
|
|
|
|
<h1>The<br>Founder’s<br>Break</h1>
|
|
|
|
<div class="when">
|
|
<span class="day">Every Thursday</span>
|
|
<span class="time">7 to 9 PM</span>
|
|
</div>
|
|
|
|
<div class="say">
|
|
<p class="lead">Zero pool skills required. We are here to build startups, not run the table.</p>
|
|
<p>Engineers, designers, business minds and anyone building something from the ground up. No pitches, no entry fee, no name tags.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class="title-block">
|
|
<div class="cell venue-cell">
|
|
<dt>Venue</dt>
|
|
<img src="silverq-black.png" alt="Silver Q">
|
|
</div>
|
|
<div class="cell">
|
|
<dt>Location</dt>
|
|
<dd>225 W University Ave<span>Gainesville, FL 32601</span></dd>
|
|
</div>
|
|
<div class="cell">
|
|
<dt>Entry</dt>
|
|
<dd class="free">Free<span>18 and over<br>Bring ID</span></dd>
|
|
</div>
|
|
<div class="cell qr-cell">
|
|
<img src="qr-print.png" alt="">
|
|
<span class="qr-text">Scan to RSVP</span>
|
|
</div>
|
|
</dl>
|
|
|
|
<div class="credit">
|
|
<span>Hosted by OneTouch Studio</span>
|
|
<span>foundersbreak.onetouch.studio</span>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|