learn-javascript-the-hard-way
/
blockstart
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Patreon and Slack demos done.

Browse Source
master
Zed A. Shaw 3 years ago
parent 2548b7e052
commit bd3eedac2f
2 changed files with 135 additions and 10 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/blockstart/demos/patreon.html
  2. 143
      public/blockstart/demos/slack.html

2
public/blockstart/demos/patreon.html
Unescape View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blockstart Template</title>
<title>Blockstart Patreon Demo</title>
<link rel="stylesheet" href="/blockstart/blockstart.css">

143
public/blockstart/demos/slack.html
Unescape View File

@ -10,20 +10,145 @@
<style>
</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>
<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="/blockstart/#about">About</a> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
<a href="#">Q</a> &nbsp;
<a href="#">=</a> &nbsp;
</div>
</block>
<h1>Coming soon...</h1>
<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 sized solid pad" style="--value: 9;">
<block class="center-self center-text pad sized" style="--w: 80vw;">
<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="sized center-self" style="--cols: 1fr 1fr 1fr; --w: 80vw;">
<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 pad" style="--value: 2; --text: 9">
<block class="sized center-self center-text" style="--w: 80vw">
<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>

Write Preview
Loading…
Cancel
Save