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.
153 lines
4.8 KiB
153 lines
4.8 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Blockstart Slack Demo</title>
|
|
|
|
<link rel="stylesheet" href="/blockstart/blockstart.css">
|
|
|
|
<style>
|
|
</style>
|
|
</head>
|
|
|
|
<body class="solid" style="--value: 8">
|
|
<block class="horizontal pad solid" style="--value: 2; --spacing: space-around; width: unset; --text: 9">
|
|
<a href="/blockstart/demos/">SLACK</a>
|
|
<div class="horizontal" style="--spacing: end;">
|
|
<a href="#">Q</a>
|
|
<a href="#">=</a>
|
|
</div>
|
|
</block>
|
|
|
|
<block class="solid pad" style="--value: 2; --text: 9; --pad: 3rem;">
|
|
<h1>Flexitarian Vice Poutine Synth</h1>
|
|
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac..</p>
|
|
<button style="--text: 0">Sign up with email</button>
|
|
<button style="--text: 0">Sign up with google</button>
|
|
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
|
|
<hr>
|
|
<shape style="--w: 700px; --h: 400px;">
|
|
<h1>Phone Demo</h1>
|
|
</shape>
|
|
</block>
|
|
|
|
<block class="pad center center-text" style="--pad: 2rem;">
|
|
<h4>TRUSTED BY COMPANIES ALL OVER THE WORLD</h4>
|
|
<hr>
|
|
<div style="font-size: 1.5em;">Flexitarian Vice Poutine Synth Flexitarian Vice Poutine Synth</div>
|
|
</block>
|
|
|
|
<block class="horizontal" style="--spacing: start">
|
|
<shape style="--h: 800px; --w: 400px;">
|
|
<h1>People Dancing For Work</h1>
|
|
</shape>
|
|
</block>
|
|
|
|
<block>
|
|
<h2>Thundercats Tonx Pok Pok Pork</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.</p>
|
|
<a href="#">Link to stuff.</a>
|
|
</block>
|
|
|
|
<hr>
|
|
<block class="horizontal" style="--spacing: end">
|
|
<shape style="--h: 800px; --w: 400px;">
|
|
<h1>People Dancing For Work</h1>
|
|
</shape>
|
|
</block>
|
|
|
|
<block>
|
|
<h2>Thundercats Tonx Pok Pok Pork</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.</p>
|
|
<a href="#">Link to stuff.</a>
|
|
</block>
|
|
|
|
<hr>
|
|
<block class="horizontal" style="--spacing: start">
|
|
<shape style="--h: 800px; --w: 400px;">
|
|
<h1>People Dancing For Work</h1>
|
|
</shape>
|
|
</block>
|
|
|
|
<block>
|
|
<h2>Thundercats Tonx Pok Pok Pork</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.</p>
|
|
<a href="#">Link to stuff.</a>
|
|
</block>
|
|
|
|
|
|
<hr>
|
|
<block class="center solid sized" style="--value: 9; --w: 100%;">
|
|
|
|
<block class="center-self sized center-text pad" style="--w: 80%;">
|
|
<h1>Thundercats Tonx Pok Pok Pork</h1>
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
|
|
<button class="pad">MEET SLACK FOR ENTERPRISE</button>
|
|
<button class="pad">TALK TO SALES</button>
|
|
</block>
|
|
|
|
<grid class="center-self sized" style="--cols: 1fr 1fr 1fr; --w: 80%;">
|
|
<block>
|
|
<h1>75%</h1>
|
|
<span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span>
|
|
</block>
|
|
<block>
|
|
<h1>84%</h1>
|
|
<span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span>
|
|
</block>
|
|
<block>
|
|
<h1>91%</h1>
|
|
<span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span>
|
|
</block>
|
|
</grid>
|
|
</block>
|
|
|
|
<shape style="--h: 400px">
|
|
<h1>Video</h1>
|
|
</shape>
|
|
|
|
<block class="solid pad" style="--value: 9">
|
|
<blockquote>
|
|
"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." -- <b>Quote Person</b>
|
|
</blockquote>
|
|
</block>
|
|
|
|
<hr>
|
|
<grid style="--cols: 1fr 1fr 1fr 1fr; --gap: 1rem;">
|
|
<shape style="--w: 200px; --h: 400px;">
|
|
<h1>Card</h1>
|
|
</shape>
|
|
<shape style="--w: 200px; --h: 400px;">
|
|
<h1>Card</h1>
|
|
</shape>
|
|
<shape style="--w: 200px; --h: 400px;">
|
|
<h1>Card</h1>
|
|
</shape>
|
|
<shape style="--w: 200px; --h: 400px;">
|
|
<h1>Card</h1>
|
|
</shape>
|
|
</grid>
|
|
|
|
<hr>
|
|
<block class="solid center sized" style="--value: 2; --text: 9; --w: 100%">
|
|
<block class="sized center-self center-text" style="--w: 80%">
|
|
<h1>Welcome to your new digital HQ</h1>
|
|
|
|
<button class="pad" style="--text: 0;">TRY FOR FREE</button>
|
|
<button class="pad" style="--text: 0;">TALK TO SALES</button>
|
|
</block>
|
|
</block>
|
|
|
|
<hr>
|
|
<block class="sized solid" style="--value: 9; --h: 700px;">
|
|
<h1>Footer</h1>
|
|
</block>
|
|
|
|
</body>
|
|
</html>
|
|
|