|
|
|
|
@ -9,21 +9,123 @@ |
|
|
|
|
<link rel="stylesheet" href="/blockstart/blockstart.css"> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
h1 { |
|
|
|
|
font-size: 3em; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
block { |
|
|
|
|
margin-top: 2rem; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
<block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;"> |
|
|
|
|
<a href="/blockstart/">blockstart.css</a> |
|
|
|
|
<div class="horizontal" style="--spacing: end;"> |
|
|
|
|
<a href="/blockstart/#about">About</a> | |
|
|
|
|
<a href="/blockstart/#docs">Docs</a> | |
|
|
|
|
<a href="/blockstart/demos/">Demos</a> | |
|
|
|
|
<a href="/blockstart/blockstart.css">Download</a> |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
<h1>Coming soon...</h1> |
|
|
|
|
<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> |
|
|
|
|
|
