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.
131 lines
4.1 KiB
131 lines
4.1 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Blockstart Template</title>
|
|
|
|
<link rel="stylesheet" href="/blockstart/blockstart.css">
|
|
|
|
<style>
|
|
h1 {
|
|
font-size: 3em;
|
|
}
|
|
|
|
block {
|
|
margin-top: 2rem;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<block class="pad" style="margin-top: 0px;">
|
|
<block class="horizontal pad" style="--spacing: space-around; width: unset; margin-top: 0px;">
|
|
<a href="/blockstart/demos/">P</a>
|
|
<div class="horizontal" style="--spacing: end;">
|
|
<a href="#">Log In</a>
|
|
<a href="#">Create</a>
|
|
<a href="#">=</a>
|
|
</div>
|
|
</block>
|
|
<input type="text" placeholder="Find a creator"></input>
|
|
</block>
|
|
|
|
<block class="solid pad sized" style="--value: 1; --text: 9; --h: 700px;">
|
|
<h1>Flexitarian Vice Poutine Synth</h1>
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
|
|
<div class="no-flex">
|
|
<button class="pad">Get started</button>
|
|
</div>
|
|
|
|
<hr>
|
|
<shape style="--h: 400px">
|
|
<h1>Video</h1>
|
|
</shape>
|
|
</block>
|
|
|
|
<content class="pad">
|
|
<block class="center center-text pad sized" style="--pad: 2rem; --h: 400px; --w: 80vw;">
|
|
<h1 class="center">Thundercats Tonx Pok Pok Pork</h1>
|
|
|
|
<block>
|
|
<input class="solid" style="--value: 8" type="text" placeholder="Find a creator"></input>
|
|
<button class="solid" style="--value: 5">Search</button>
|
|
</block>
|
|
</block>
|
|
|
|
|
|
<block class="center center-text pad" style="--pad: 2rem;">
|
|
<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>
|
|
</block>
|
|
|
|
<block>
|
|
<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>
|
|
</block>
|
|
|
|
<block>
|
|
<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>
|
|
</block>
|
|
|
|
<block>
|
|
<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>
|
|
</block>
|
|
|
|
<block class="center center-text">
|
|
<h1>Who uses Patreon?</h1>
|
|
|
|
<hr>
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
|
|
<hr style="--h: 2rem;">
|
|
<div class="no-flex" style="font-size: 1.5em;">
|
|
<span>Flexitarian</span>
|
|
<span>Vice</span>
|
|
<span>Poutine</span>
|
|
<span>Synth</span>
|
|
<span>Thundercats</span>
|
|
<span>Tonx</span>
|
|
<span>Pok</span>
|
|
<span>Pok</span>
|
|
<span>Pork</span>
|
|
</div>
|
|
|
|
<hr>
|
|
<shape style="--h: 500px; --w: 800px;">
|
|
<h1>People Scroller</h1>
|
|
</shape>
|
|
</block>
|
|
|
|
|
|
<block class="center center-text">
|
|
<h1>Are you ready to take back control?</h1>
|
|
<button class="no-flex">Get started</button>
|
|
</block>
|
|
</content>
|
|
|
|
|
|
<block class="solid center center-text sized" style="--h: 800px; --value: 2; --text: 9;">
|
|
<h1>Footer</h1>
|
|
</block>
|
|
</body>
|
|
</html>
|
|
|