69 lines
2.8 KiB
HTML
69 lines
2.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<link rel="stylesheet" href="thumbnail.css" />
|
||
|
|
<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,__CIO_LOGO_B64__" alt="ClassroomIO" />
|
||
|
|
<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>
|