manifold/og-image/public/og-cover.html
2022-01-07 13:27:54 -08:00

95 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Generated Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap");
body {
background: white;
background-image: radial-gradient(
circle at 25px 25px,
lightgray 2%,
transparent 0%
),
radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%);
background-size: 100px 100px;
height: 100vh;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
code {
color: #d400ff;
font-family: "Vera";
white-space: pre-wrap;
letter-spacing: -5px;
}
code:before,
code:after {
content: "`";
}
.logo-wrapper {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
justify-items: center;
}
.logo {
margin: 0 75px;
}
.plus {
color: #bbb;
font-family: Times New Roman, Verdana;
font-size: 100px;
}
.spacer {
margin: 150px;
}
.emoji {
height: 1em;
width: 1em;
margin: 0 0.05em 0 0.1em;
vertical-align: -0.1em;
}
.heading {
font-family: "Major Mono Display", monospace;
font-size: 100px;
font-style: normal;
color: black;
line-height: 1.8;
}
</style>
<body>
<div>
<div class="spacer"></div>
<div class="logo-wrapper">
<img
class="logo"
alt="Generated Image"
src="https:&#x2F;&#x2F;manifold.markets&#x2F;logo.png"
width="auto"
height="225"
/>
</div>
<div class="heading">
<p><strong>Helloz</strong> World</p>
</div>
</div>
</body>
</html>