1
0
Fork 0
jinjax/docs/components/SocialCardIndex.jinja

67 lines
1.4 KiB
Text
Raw Normal View History

{#def page #}
<Layout
title={{ page.title }}
description={{ page.description }}
>
<style>
body {
background-color: black;
}
.sc1 {
width: 1200px;
height: 630px;
margin: 0;
font-family: SF Pro Display, system-ui, sans-serif;
color: black;
background-color: white
}
.sc1 > * {
position: absolute;
left: 100px;
width: 900px;
text-align: center;
overflow: hidden;
}
.sc1__logo {
top: 100px;
}
.sc1__logo img {
display: inline-block;
height: 200px;
width: auto;
margin: 0 auto;
}
.sc1__description {
top: 350px;
font-weight: bold;
font-size: 60px;
line-height: 1.2;
letter-spacing: -0.05em;
text-align: center;
}
.sc1__description .g1 {
background-image: linear-gradient(to bottom right, #fbbf24, #fb923c);
background-clip: text;
color: transparent;
}
.sc1__description .g2 {
background-image: linear-gradient(to bottom right, #34d399, #3b82f6);
background-clip: text;
color: transparent;
}
</style>
<article class="sc1">
<div class="sc1__logo">
<img src="/static/img/jinjax-logo.png" />
</div>
<div class="sc1__description">
Super
<span class="g1">components powers</span>
for your
<span class="g2">Jinja templates</span>
</div>
</article>
</Layout>