48 lines
2.4 KiB
HTML
48 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* 1200x630 unfurl card. This is what people actually see when the link is
|
|
pasted into a text, a Slack channel or a story, so it carries the same four
|
|
facts the flyer leads with rather than being a decorative banner. */
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { width: 1200px; height: 630px; background: #06060b; color: #f1f0ff;
|
|
font-family: "Inter", sans-serif; overflow: hidden; position: relative; }
|
|
|
|
.art { position: absolute; top: -40px; right: -260px; width: 900px; opacity: 0.22; }
|
|
.art img { width: 100%; display: block; }
|
|
|
|
.wrap { position: relative; padding: 64px 68px; height: 630px; display: flex; flex-direction: column; }
|
|
|
|
.kicker { font-family: "JetBrains Mono", monospace; font-size: 15px; letter-spacing: 0.2em;
|
|
text-transform: uppercase; color: #34d399; }
|
|
h1 { font-family: "Space Grotesk", sans-serif; font-size: 88px; font-weight: 700;
|
|
line-height: 0.9; letter-spacing: -0.035em; margin-top: 22px; text-transform: uppercase; }
|
|
|
|
.when { margin-top: 34px; display: flex; align-items: baseline; gap: 18px; }
|
|
.when b { font-family: "Space Grotesk", sans-serif; font-size: 40px; font-weight: 700;
|
|
letter-spacing: -0.02em; text-transform: uppercase; }
|
|
.when .t { color: #34d399; }
|
|
|
|
.foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
|
|
.where { font-size: 21px; color: #c2c0d4; line-height: 1.4; }
|
|
.where strong { color: #f1f0ff; font-weight: 600; display: block; font-size: 24px; }
|
|
.free { font-family: "JetBrains Mono", monospace; font-size: 15px; letter-spacing: 0.16em;
|
|
text-transform: uppercase; color: #8b89a6; text-align: right; line-height: 1.7; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="art"><img src="email-header-web.png" alt=""></div>
|
|
<div class="wrap">
|
|
<p class="kicker">UF Startup Pool Social / Gainesville</p>
|
|
<h1>The Founder’s<br>Break</h1>
|
|
<p class="when"><b>Every Thursday</b><b class="t">7 to 9 PM</b></p>
|
|
<div class="foot">
|
|
<p class="where"><strong>Silver Q Billiards</strong>225 W University Ave, Gainesville</p>
|
|
<p class="free">Free entry<br>18 and over</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|