|
|
<!DOCTYPE html>
|
|
|
<!-- Source of og-de.png (1200×630). Render: Chrome headless, see README. -->
|
|
|
<html lang="de"><head><meta charset="utf-8">
|
|
|
<link href="../fonts/fonts.css" rel="stylesheet">
|
|
|
<style>
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
body { width: 1200px; height: 630px; overflow: hidden; color: #F5F5F4; font-family: "Kanit", sans-serif; font-weight: 300;
|
|
|
background: radial-gradient(520px 420px at 88% 8%, rgba(200,169,106,.22), transparent 70%), #0B0B0C;
|
|
|
display: grid; grid-template-columns: 1fr 380px; align-items: center; padding: 0 90px; }
|
|
|
.brand { display: flex; align-items: center; gap: 14px; font-weight: 500; font-size: 30px; margin-bottom: 44px; }
|
|
|
.brand svg { width: 52px; height: 52px; }
|
|
|
h1 { font-size: 76px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
|
|
|
.em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: #E4C98F; }
|
|
|
p { margin-top: 30px; font-size: 26px; color: #B8B5B0; }
|
|
|
.art { display: flex; align-items: center; gap: 26px; justify-content: flex-end; }
|
|
|
.master { width: 170px; aspect-ratio: 9/16; border: 4px solid #F5F5F4; border-radius: 20px; position: relative; overflow: hidden;
|
|
|
background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); }
|
|
|
.crop { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 4/5; transform: translateY(-50%); border: 4px solid #C8A96A; border-radius: 12px; box-shadow: 0 0 0 999px rgba(11,11,12,.55); }
|
|
|
.cut { width: 150px; aspect-ratio: 4/5; border-radius: 16px; background: #C8A96A; box-shadow: 0 0 60px rgba(200,169,106,.45); }
|
|
|
.arrow { color: #C8A96A; font-size: 40px; }
|
|
|
</style></head>
|
|
|
<body>
|
|
|
<div>
|
|
|
<div class="brand"><svg viewBox="0 0 1024 1024"><rect x="310" y="152" width="404" height="718" rx="44" fill="none" stroke="#F5F5F4" stroke-width="44"/><rect x="328" y="281" width="368" height="460" rx="26" fill="#C8A96A"/></svg>drop.two</div>
|
|
|
<h1>9:16 rein.<br><span class="em">9:16 und 4:5 raus.</span></h1>
|
|
|
<p>Kostenlos für macOS</p>
|
|
|
</div>
|
|
|
<div class="art"><div class="master"><div class="crop"></div></div><span class="arrow">→</span><div class="cut"></div></div>
|
|
|
</body></html>
|
