158 lines
67 KiB
HTML
158 lines
67 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<style>
|
||
|
|
/* ClassroomIO thumbnail brand tokens — Figma-exact. Consume these; do not eyeball.
|
||
|
|
Palette: deep blue #0233BD · brand blue #2F6BF1 · light blue #ADC3FF · violet #8071F2 */
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Geist';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 100 900;
|
||
|
|
font-display: block;
|
||
|
|
src: url(data:font/woff2;base64,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
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
html, body { width: 1920px; height: 1080px; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Geist', sans-serif;
|
||
|
|
width: 1920px; height: 1080px; position: relative; overflow: hidden;
|
||
|
|
/* Royal-blue full-bleed with center-bright vignette */
|
||
|
|
background: radial-gradient(120% 110% at 50% 42%, #2B5BE0 0%, #1D49C7 42%, #12318F 78%, #0E2A7E 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- faint white texture (keep ~5-12% opacity; never competes with title) --- */
|
||
|
|
.texture { position: absolute; inset: 0; pointer-events: none; }
|
||
|
|
.card-line {
|
||
|
|
position: absolute; top: 50%; left: 50%;
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.06);
|
||
|
|
border-radius: 60px; transform: translate(-50%, -58%);
|
||
|
|
}
|
||
|
|
.spark { position: absolute; color: #8FE8DC; opacity: .85; font-size: 34px; }
|
||
|
|
|
||
|
|
/* --- frame (logo + wordmark on ONE edge, domain on the other; never both edges) --- */
|
||
|
|
.frame { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 72px; align-items: center; }
|
||
|
|
.frame.top { top: 52px; }
|
||
|
|
.frame.bottom { bottom: 52px; }
|
||
|
|
.brand { display: flex; align-items: center; gap: 18px; }
|
||
|
|
.brand img { width: 52px; height: 52px; filter: brightness(0) invert(1); }
|
||
|
|
.brand .name { color: #fff; font-size: 40px; font-weight: 700; letter-spacing: -1px; }
|
||
|
|
.domain { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 34px; font-weight: 600; }
|
||
|
|
.domain .globe { width: 36px; height: 36px; border: 2.5px solid #fff; border-radius: 50%; position: relative; opacity: .92; }
|
||
|
|
.domain .globe::before { content: ''; position: absolute; inset: -2.5px 8px; border: 2.5px solid #fff; border-radius: 50%; }
|
||
|
|
.domain .globe::after { content: ''; position: absolute; left: -2.5px; right: -2.5px; top: 50%; height: 0; border-top: 2.5px solid #fff; transform: translateY(-1px); }
|
||
|
|
.domain span { text-decoration: underline; text-underline-offset: 6px; }
|
||
|
|
|
||
|
|
/* --- glass icon tile (patterns C & D): blue gradient fill + iridescent border, NOT frosted white --- */
|
||
|
|
.tile-wrap {
|
||
|
|
padding: 2.5px; border-radius: 44px;
|
||
|
|
background: linear-gradient(135deg, #0233BD 23%, #ADC3FF 42%, #8071F2 54%, #0233BD 82%);
|
||
|
|
box-shadow: 0 40px 80px rgba(6, 18, 66, 0.45);
|
||
|
|
}
|
||
|
|
.tile {
|
||
|
|
width: 300px; height: 300px; border-radius: 42px;
|
||
|
|
background: linear-gradient(145deg, #0233BD 10%, #2F6BF1 94%);
|
||
|
|
display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
|
||
|
|
}
|
||
|
|
.tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); }
|
||
|
|
.tile img { width: 172px; height: 172px; filter: brightness(0) invert(1); position: relative; z-index: 1; }
|
||
|
|
.tile .svg-icon { width: 186px; height: auto; position: relative; z-index: 1; }
|
||
|
|
.tile .svg-icon svg { width: 100%; height: auto; }
|
||
|
|
.tile .label { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 26px; font-weight: 600; letter-spacing: .5px; }
|
||
|
|
|
||
|
|
/* --- connector (two-tile / before->after) --- */
|
||
|
|
.connector { display: flex; align-items: center; margin: 0 -6px; z-index: 2; }
|
||
|
|
.connector .dash { width: 44px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); }
|
||
|
|
.connector .node {
|
||
|
|
width: 74px; height: 74px; margin: 0 10px; border-radius: 50%;
|
||
|
|
padding: 2.5px; background: linear-gradient(135deg, #0233BD 23%, #ADC3FF 42%, #8071F2 54%, #0233BD 82%);
|
||
|
|
box-shadow: 0 16px 32px rgba(6, 18, 66, 0.4);
|
||
|
|
}
|
||
|
|
.connector .node-inner { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(145deg, #0233BD 10%, #2F6BF1 94%); display: flex; align-items: center; justify-content: center; }
|
||
|
|
.connector .node-inner svg { width: 36px; height: 36px; }
|
||
|
|
|
||
|
|
/* --- pill / badge: fully gradient-built (fill + iridescent border + clipped gradient text) --- */
|
||
|
|
.pill-wrap {
|
||
|
|
padding: 2px; border-radius: 999px;
|
||
|
|
background: linear-gradient(180deg, #0233BD 24%, #C1D4FF 55%, #93B4FF 80%);
|
||
|
|
box-shadow: 0 16px 32px rgba(6, 18, 66, 0.35);
|
||
|
|
}
|
||
|
|
.pill { height: 70px; padding: 0 40px; border-radius: 999px; background: linear-gradient(180deg, #0233BD 0%, #0C4BDA 100%); display: flex; align-items: center; }
|
||
|
|
.pill span {
|
||
|
|
font-size: 30px; font-weight: 700; letter-spacing: .5px;
|
||
|
|
background: linear-gradient(180deg, #FFFFFF 0%, #8EACFF 100%);
|
||
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- title: bold white Title Case, tight tracking; lighter 78%-white tail for hierarchy --- */
|
||
|
|
.title { color: #fff; font-weight: 700; line-height: 1.02; letter-spacing: -3px; }
|
||
|
|
.title .tail { font-weight: 500; color: rgba(255, 255, 255, 0.78); }
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
/* Hero-icon (Pattern D) layout */
|
||
|
|
.stage {
|
||
|
|
position: absolute; top: 132px; left: 0; right: 0;
|
||
|
|
display: flex; flex-direction: column; align-items: center;
|
||
|
|
}
|
||
|
|
.pill-wrap { margin-top: 52px; }
|
||
|
|
.title {
|
||
|
|
margin-top: 46px; text-align: center; font-size: 100px;
|
||
|
|
}
|
||
|
|
/* DigitalOcean mark sits a touch larger in the tile */
|
||
|
|
.tile .svg-icon { width: 168px; }
|
||
|
|
/* small floating accent squares around the hero tile */
|
||
|
|
.accent {
|
||
|
|
position: absolute; padding: 2px; border-radius: 16px;
|
||
|
|
background: linear-gradient(135deg, #0233BD 23%, #ADC3FF 42%, #8071F2 54%, #0233BD 82%);
|
||
|
|
box-shadow: 0 18px 36px rgba(6, 18, 66, 0.4);
|
||
|
|
}
|
||
|
|
.accent > div {
|
||
|
|
width: 100%; height: 100%; border-radius: 14px;
|
||
|
|
background: linear-gradient(145deg, #0233BD 10%, #2F6BF1 94%);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="texture">
|
||
|
|
<div class="card-line" style="width:520px;height:520px;"></div>
|
||
|
|
<div class="card-line" style="width:780px;height:720px;border-radius:80px;"></div>
|
||
|
|
<div class="card-line" style="width:1060px;height:920px;border-radius:110px;"></div>
|
||
|
|
<div class="card-line" style="width:1380px;height:1140px;border-radius:140px;"></div>
|
||
|
|
<div class="spark" style="top:170px;left:360px;">✦</div>
|
||
|
|
<div class="spark" style="top:240px;right:330px;font-size:26px;">✦</div>
|
||
|
|
<div class="spark" style="bottom:250px;left:220px;">✦</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Frame on the BOTTOM edge (Pattern D) -->
|
||
|
|
<div class="frame bottom">
|
||
|
|
<div class="brand">
|
||
|
|
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAEJCSURBVHgB7d1pblzXuTf6Z+2q0jGQXIQZgcsjMIlIAvzJJXkAlkcgagSWRyB5BJZHIGkEVgYQq/JJgCWBzAjCjOBlcN8D6LpYe929i6Qtq2VTzW5+P0Bm44MAx1DVrvVfTxMBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAq5UCgMb6ZLI3rr8exdE4D9JW5Niqf06RF78vovj09P82p+Pfnfwwfvt/LY8Dzm6/+pu2n8vy8dH02jSA/pnsbX0SsbV4BhVpXKT4S875r6fPnt+eO289cz7+vMkRhynS4clPh9WDbfF9yumg/lpG+Z+U0v8pc/w3lfmgeu4dzmJ0ENOdwwAuTAAAsGb1oX4es61yUIzrA319mD/+MJW3qg9E4+qtufqaq98fH/Zh8/LBrBzeqD54HwTQHdUBfxSzcVkU2/Xhvjp8bx8/i9J2w59D+3VgUIcFdVCQU9pP83x4FMN9AQF8mAAAYJlObktmg/l2EfFpdYXxWXWD8Zfqg9R2fbB3C0+bFZG/+/9+vvYggHZ5/aCfYzul+LQ+5HfxmbSoLEhVQFDGv6o3rX/nef6XYAB+JwAAOK83Dvn1jYkDPr1RDnZn053HATRT9YwaxtF2GqTPj59PMfFsWtivDj4HOcVUKECfCQAA3qdHNyZwDoezcrCjHQAaonpWDYr5rfo5VX2y/7L6zXZwVvuR459lEdP5fLDvfY0+EAAAxHFf/h9v9N2YwHtVN2izf1y9EcD6/eHAn772rFqqxfDTMuW/CwToKgEA0DuLw34xnyw+PEV8nlN1u2/gHpzLrBz8VfksrMdw8nxSFMWXOedJ9el9EqzLokKg+u/+xDYUukIAAHTbH3ohY1JWv3HYh2XI380MBITVqG/5B/PJIKevy8i3PLc272Rt4ZOT6oCpAJS2EgAAnXJ6uz+I9KUyflil9Gj289/uBLAcv5f231aZ1gIpphGDR7N5/FOrAG0iAABabTT5ZTsGxZd1375bElgjcwDg8hz6u+H3MODvKgNoOgEA0Cr1Df98MP9aOT9smAAALuykp/+24LqL0qNclo/NDKCpBABAs53cjtQl/T4oQYMIAOB8qufZlaL8tnqW3fUs64N8EFFMZ2XxvRYBmkQAADROfTOSUrpVffu5acfQUAIAOJOTZ9o9z7MeO20R+MfO44ANEwAAm+eWH9pHAADv57afd1pUBTyZlcWPqgLYFAEAsBF1L39ZlLftNIaWEgDAW45v+/NuTsXXDv58WHoU5fzH2fT6fsAaCQCAtfmttD+lr63ng5YTAMBvlPlzYdoDWDMBALBSp4f+nOK22xDoEAEAxOjmi93IcdvBn8vLB5GG9wUBrJoAAFg6h37oAQEAPbY4+Ed146+ajaUTBLBaAgBgKRz6oWcEAPSQgz/rIwhgNQQAwMWdTDnOEbs+DEHPCADoEQd/NkcQwHIJAIDzqQ79o8H8dpRxS88j9JgAgB4w3I/mEASwHAIA4EzqD0FFUdwuI99S4g8IAOgyB38abH9WDr6J6c5BwAUMA+B9Tkr8q0P/3frQnyNLDQHorrrKLc0eREq3A5ppe1TM/x03Xz6alcX3ggDOy2d54C1uPoCPUgFAl7wReAe0RIp0/9ef//Z9wBkJAIBjPvwA5yEAoCMWoXdRPDTgj/YyH4Cz0wIAPff7bf98kkMqCEBPTJ6NR2n08LjaLQe0VxpHnj8a3Xw50RbAx/isD330+yT/3epdYDsAzksFAC02+urFtznHfRVvdJG2AD5EAAB9Ut12XCmu3FbmD1yaAIA2mvyyPUrFD2bc0H35YFYOb6gG4E1FAJ1Xl/mPbrx4OipG/86R3XgA0DtXbr68NyqKPYd/+iGN620B9d/7gNeoAIAOM80fWBkVALRFfeu/GPKn5Y2+Ug3A7wwBhK45meafI3ZNNAagz+pe/8jxIKDXjqsB0s2XZgOgAgA6wxo/YJ1UANBkf5jwD/xONUDfmQEAbVcf/G++vDeskl39/QD03Wiyd3tYjPT6wzstqgH2/ufm87tBL2kBgLb67cZ/fjdXh37lPAD0Wr3itijvRfVc9EyED9oqI/0wuvny81lZfBfTncOgNwQA0DYO/gDwR3XJf1E+NfsGziPvjoqjyWyypyWgR7QAQFso9QeAt9SD/hYl/w7/cAHHAwK1BPSHCgBoOjf+APBOo5svf4iclfzDJZ20BHw6+/lv3wWd5v0SmspUf6DJbAFgkxYl/6Ofqu+2A1giWwK6TgsANI1SfwB4v8kv26PiytNw+IcVqFsCjp6OqtdZ0EkCAGiQ4z5GB38AeJf6OTkqCv3+sFJpHNXrrL6QCjrHDABogOHk+SQVxcPIeawvBwDeNqwPIznfD2At6gupKgSIX3/+2/dBZwgAYIMWB/+U7kWKSf02CwC8YbK3NSrmP9QrywJYq+MQ4MX2r+XgTkx3DoPW0wIAmzB5Nh7efPFTKtLT48M/APCWxbC/ed3vvxvARlRXVLdGxdFeFcaNg9YTAMA6/Tbgb7SXqjfTAADebXH4N+wPmuF4OKAQoP0EALAmBvwBwBn9NunfsD9ojjoEmO/ZENBuAgBYsbrPf3TjxdPI8cDBHwA+rH5uDovC4R+aaSuq1+dosnc7aCUBAKxKPbToxi+P9PkDwNnUh4r6uSkwh0arQoD5o/+5+fxu0DoCAFiB03L/SIV0FADOoH521oeKAFqhjPRDPdsqaBUBACyRcn8AOL9hfYionp0BtMrxmkAhQJsIAGAZ6nL/my9/UO4PAOdTH/5TdYgIoJWEAO0iAIBLuvLVi1uLcv/I+qAA4Bwc/qEbhADtIQCAi6r3E9948TTn+Em5PwCcj8M/dIsQoB0EAHABx0P+RnvK/QHg/Bz+oZuEAM03DODs6lv/NHpYvbtNUgAA5+XwD912EgLErz//7fugcVQAwBnVaeaoGP3brT8AXMxosnfb4R+6rw4B/ufmc/OxGkgFAHzM5JftUVE8rN7ItgMAuJB6aG7O80cB9EIZ6Ycq9Ps/s+nO46AxVADABxzf+hd71
|
||
|
|
<div class="name">ClassroomIO</div>
|
||
|
|
</div>
|
||
|
|
<div class="domain"><span class="globe"></span><span>classroomio.com</span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stage">
|
||
|
|
<div style="position:relative;">
|
||
|
|
<div class="accent" style="width:70px;height:70px;top:-34px;left:-64px;"><div></div></div>
|
||
|
|
<div class="accent" style="width:44px;height:44px;bottom:-18px;right:-58px;"><div></div></div>
|
||
|
|
|
||
|
|
<div class="tile-wrap"><div class="tile">
|
||
|
|
<div class="svg-icon">
|
||
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#ffffff"><path d="M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 014.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zM7.39 19.362H3.828v3.564H7.39zm-3.563 0v-2.978H.85v2.978z"/></svg>
|
||
|
|
</div>
|
||
|
|
<div class="label">DigitalOcean</div>
|
||
|
|
</div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pill-wrap"><div class="pill"><span>SELF-HOST GUIDE</span></div></div>
|
||
|
|
|
||
|
|
<div class="title">Self-Host ClassroomIO<br/><span class="tail">on </span>DigitalOcean</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|