A simple CSS file to make it easier to layout a web page quickly at the start. It's meant to be removed once you have the basic layout done, but you could probably keep it if you like it.
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.
 
 
blockstart/public/demos/todoist.html

155 lines
4.9 KiB

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blockstart Demo todoist</title>
<link rel="stylesheet" href="/blockstart.css">
<style>
</style>
</head>
<body>
<block class="horizontal pad">
<b>todoist</b>
<div style="align-items: end;">
<span>Log in<span>
&nbsp;
<button>Start For Free</button>
&nbsp;
<span class="font-size: 2em;">=</span>
</div>
</block>
<hr>
<block class="center-text solid">
<h1>Organize your work</h1>
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
<button class="center-self">Start For Free</button>
<hr>
<shape style="--w: 400px; --h: 200px;"><h1>Screenshot</h1></shape>
<block class="pad horizontal">
<left>
300,000 reviews
</left>
<right>
USED BY INDIVIDUALS
</right>
</block>
</block>
<hr>
<content class="sized center" style="--w: 70vw;">
<block class="horizontal">
<left>
<h2>Add your tasks.</h2>
<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>
</left>
<right>
<shape style="--w: 150px; --h: 300px;">
<h1>Phone</h1>
</shape>
</right>
</block>
<hr>
<block class="horizontal center center-text">
<left>
<shape style="--w: 150px; --h: 300px;">
<h1>Phone</h1>
</shape>
</left>
<right>
<h2>Flexitarian Vice Poutine Synth</h2>
<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>
</right>
</block>
<hr>
<block class="center center-text">
<h1>Cardigan raclette tbh, kitsch lomo fanny pack vegan</h1>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<hr>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>With you everywhere</h5>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<a href="">Download apps</a>
</block>
<hr>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>With you everywhere</h5>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<a href="">Download apps</a>
</block>
<hr>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>With you everywhere</h5>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<a href="">Download apps</a>
</block>
<hr>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>With you everywhere</h5>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<a href="">Download apps</a>
</block>
</block>
<hr>
<block class="center center-text">
<h3>Flexitarian Vice Poutine Synth</h3>
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
<hr>
<grid style="--cols: 1fr 1fr; --rows: 1fr 1fr">
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>30 million+</h5>
<span>app downloads</span>
</block>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>30 million+</h5>
<span>app downloads</span>
</block>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>30 million+</h5>
<span>app downloads</span>
</block>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>30 million+</h5>
<span>app downloads</span>
</block>
</grid>
</block>
</content>
<hr>
<block class="horizontal solid">
<left>
<shape style="--w: 250px; --h: 300px;">Flower</shape>
</left>
<right class="center">
<h1>Flexitarian Vice Poutine Synth</h1>
<button>Start for free</button>
</right>
</block>
<block class="sized solid center-text" style="--h: 500px;">
<h1>Footer</h1>
</block>
</body>
</html>