You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
273 lines
5.9 KiB
273 lines
5.9 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Blockstart Patreon Demo</title>
|
|
|
|
<link rel="stylesheet" href="/blockstart/blockstart.css">
|
|
|
|
<style>
|
|
h1 {
|
|
font-size: 3em;
|
|
}
|
|
|
|
block {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 0px;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
padding-top: 0.3rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
input.search {
|
|
border-radius: 25px;
|
|
padding: 0.8rem;
|
|
border: 0px;
|
|
background-color: var(--value8);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
header a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a#logo-link {
|
|
font-size: 2em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
a.button {
|
|
background-color: var(--value4);
|
|
color: var(--value9);
|
|
padding: 0.8rem;
|
|
border-radius: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
header > logo {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
header > logo buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-width: 300px;
|
|
}
|
|
|
|
hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--value1);
|
|
color: var(--value9);
|
|
padding: 2rem;
|
|
}
|
|
|
|
a#get-started {
|
|
max-width: 150px;
|
|
}
|
|
|
|
pitch {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
height: 400px;
|
|
min-height: 400px;
|
|
width: 80vw;
|
|
min-width: 80vw;
|
|
}
|
|
|
|
pitch > search {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
pitch > search .button {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
content-creator {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
content-creator > h2 {
|
|
margin: 0px;
|
|
}
|
|
|
|
social-proof {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
max-width: 80vw;
|
|
align-self: center;
|
|
}
|
|
|
|
social-proof > h1 {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
social-proof > p {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
social-proof > artists {
|
|
margin-top: 1rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
social-proof > artists a {
|
|
text-decoration: none;
|
|
color: var(--value4);
|
|
}
|
|
|
|
cta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: var(--value2);
|
|
color: var(--value9);
|
|
min-height: 800px;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<logo>
|
|
<a d="logo-link" href="/blockstart/demos/">P</a>
|
|
<buttons>
|
|
<a href="#">Log In</a>
|
|
<a class="button" href="#">Create on Patreon</a>
|
|
<a href="#">=</a>
|
|
</buttons>
|
|
</logo>
|
|
<input class="search" type="text" placeholder="Find a creator"></input>
|
|
</header>
|
|
|
|
<hero>
|
|
<h1>Flexitarian Vice Poutine Synth</h1>
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
|
|
<a id="get-started" class="button">Get started</a>
|
|
|
|
<hr>
|
|
<shape style="--h: 400px">
|
|
<h1>Video</h1>
|
|
</shape>
|
|
</hero>
|
|
|
|
<content class="pad">
|
|
<pitch>
|
|
<h1 class="center">Thundercats Tonx Pok Pok Pork</h1>
|
|
|
|
<search>
|
|
<input class="search" type="text" placeholder="Find a creator"></input>
|
|
<a class="button">Search</a>
|
|
</search>
|
|
</pitch>
|
|
|
|
|
|
<pitch>
|
|
<h1>What's Patreon?</h1>
|
|
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.</p>
|
|
</pitch>
|
|
|
|
<content-creator>
|
|
<h2>Thundercats Tonx Pok Pok Pork</h2>
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
|
|
<shape style="--h: 600px;">
|
|
<h1>Person</h1>
|
|
</shape>
|
|
<a href="#">Person Name</a>
|
|
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p>
|
|
</content-creator>
|
|
|
|
<content-creator>
|
|
<h2>Flexitarian Vice Poutine Synth</h2>
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
|
|
<shape style="--h: 600px;">
|
|
<h1>Person</h1>
|
|
</shape>
|
|
<a href="#">Person Name</a>
|
|
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p>
|
|
</content-creator>
|
|
|
|
<content-creator>
|
|
<h2>This is another example block</h2>
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
|
|
<shape style="--h: 600px;">
|
|
<h1>Person</h1>
|
|
</shape>
|
|
<a href="#">Person Name</a>
|
|
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p>
|
|
</content-creator>
|
|
|
|
<social-proof>
|
|
<h1>Who uses Patreon?</h1>
|
|
<p>
|
|
If you’re ready to take your work to the next level and willing to open your heart to your audience, Patreon is for you.
|
|
</p>
|
|
<artists>
|
|
<a href="#">Flexitarian</a>
|
|
<a href="#">Vice</a>
|
|
<a href="#">Poutine</a>
|
|
<a href="#">Synth</a>
|
|
<a href="#">Thundercats</a>
|
|
<a href="#">Tonx</a>
|
|
<a href="#">Pok</a>
|
|
<a href="#">Pok</a>
|
|
<a href="#">Pork</a>
|
|
<a href="#">Synth</a>
|
|
<a href="#">Thundercats</a>
|
|
<a href="#">Tonx</a>
|
|
<a href="#">Pok</a>
|
|
<a href="#">Pok</a>
|
|
<a href="#">Pork</a>
|
|
</artists>
|
|
|
|
<hr>
|
|
<shape style="--h: 500px; --w: 800px;">
|
|
<h1>People Scroller</h1>
|
|
</shape>
|
|
</social-proof>
|
|
|
|
|
|
<cta>
|
|
<h1>Are you ready to take back control?</h1>
|
|
<a id="get-started" class="button">Get started</a>
|
|
</cta>
|
|
</content>
|
|
|
|
|
|
<footer>
|
|
<left>
|
|
<h1>Footer</h1>
|
|
</left>
|
|
|
|
<right>
|
|
<h1>Links</h1>
|
|
</right>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
|