48 lines
2.4 KiB
HTML
48 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Petrol Commons Letterhead</title>
|
|
<link rel="stylesheet" href="light-theme.css" />
|
|
<style>
|
|
body { margin: 0; padding: 40px; background: #f4f6f5; color: var(--text); font-family: var(--font-body); }
|
|
.sheet { max-width: 800px; margin: 0 auto; background: white; min-height: 1100px; padding: 56px; border: 1px solid var(--border); }
|
|
.head { display:flex; justify-content:space-between; align-items:flex-start; gap: 24px; }
|
|
.brand { display:flex; gap: 14px; align-items:center; }
|
|
.mark { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--primary), var(--accent)); }
|
|
.line { height: 5px; width: 140px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 999px; margin: 16px 0 32px; }
|
|
h1 { font-family: var(--font-display); margin: 0; font-size: 28px; }
|
|
.meta { text-align:right; color: var(--text-muted); font-size: 14px; }
|
|
.body { margin-top: 40px; line-height: 1.7; font-size: 16px; }
|
|
.footer { position: relative; margin-top: 120px; padding-top: 18px; border-top: 1px solid var(--divider); color: var(--text-muted); font-size: 13px; display:flex; justify-content:space-between; gap: 24px; flex-wrap: wrap; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
<div class="head">
|
|
<div>
|
|
<div class="brand"><div class="mark"></div><div><h1>Petrol Commons</h1><div class="muted">Community portal & design system</div></div></div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="meta">
|
|
Cologne, Germany<br />
|
|
hello@petrolcommons.example<br />
|
|
+49 221 000000
|
|
</div>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<p>Dear community partner,</p>
|
|
<p>This letterhead demonstrates the petrol brand system in a clean, printable format. The design uses deep petrol for identity, a warm accent for emphasis, and generous neutral space for readability.</p>
|
|
<p>The layout is intentionally simple so it works for letters, notices, workshop invitations, and formal community communication.</p>
|
|
<p>Kind regards,<br /><strong>Petrol Commons Team</strong></p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div>Petrol Commons · Accessible communication · Privacy-conscious by design</div>
|
|
<div>Page 1</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|