Wordstream demo.

master
Zed A. Shaw 2 years ago
parent 716ec49e26
commit 44e89b52b0
  1. 159
      public/blockstart/demos/wordstream.html

@ -15,15 +15,162 @@
<body>
<block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
<a href="/blockstart/">blockstart.css</a>
<a href="/blockstart/demos/">wordstream</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="/blockstart/demos/">=</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">O</a>
</div>
</block>
<h1>Coming soon...</h1>
<block class="solid pad">
<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>
<shape style="--w: 500px; --h: 600px; --value: 6;">
<h1>Illustration</h1>
</shape>
</block>
<block class="pad">
<shape style="--w: 500px; --h: 600px; --value: 6;">
<h1>Charts</h1>
</shape>
</block>
<block class="pad">
<h1>Stop Guessing.</h1>
<h1>Get Your Grade.</h1>
<p>Flexitarian Vice Poutine Synth</p>
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
<ol>
<li>Thundercats Tonx Pok Pok Pork</li>
<li>Thundercats Tonx Pok Pok Pork</li>
<li>Thundercats Tonx Pok Pok Pork</li>
<li>Thundercats Tonx Pok Pok Pork</li>
<li>Thundercats Tonx Pok Pok Pork</li>
</ol>
<div class="no-flex">
<button>Get My Account</button>
</div>
</block>
<block class="solid">
<h1>The WordStream Blog</h1>
<block class="horizontal pad">
<shape style="--w: 200px; --h: 200px;">
<h1>Image</h1>
</shape>
<block>
<h4>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</h4>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft.</p>
<div class="no-flex">
<button>Keep Reading</button>
</div>
</block>
</block>
<block class="pad">
<h4>More Articles</h4>
<grid style="--cols: 1fr 1fr">
<shape style="--w: 250px; --h: 250px;">
<h1>Image</h1>
</shape>
<shape style="--w: 250px; --h: 250px;">
<h1>Image</h1>
</shape>
<shape style="--w: 250px; --h: 250px;">
<h1>Image</h1>
</shape>
</grid>
</block>
</block>
<block class="pad">
<h1>Flexitarian Vice Poutine Synth</h1>
<h4>Thundercats Tonx Pok Pok Pork</h4>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
<ol>
<li>blah blah</li>
<li>blah blah</li>
<li>blah blah</li>
<li>blah blah</li>
</ol>
<div class="no-flex">
<button>Get Your Grade</button>
</div>
</block>
<block class="pad">
<shape style="--w: 500px; --h: 600px; --value: 6;">
<h1>Charts</h1>
</shape>
</block>
<block class="pad solid" style="--value: 4; --text: 9;">
<h1>Thundercats Tonx Pok Pok Pork</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
<hr>
<grid class="center-self" style="--cols: 1fr 1fr;">
<shape class="border" style="--value: 6; --w: 250px; --h: 100px;">
<h1>300k</h1>
</shape>
<shape class="border" style="--value: 6; --w: 250px; --h: 100px;">
<h1>300k</h1>
</shape>
<shape class="border" style="--value: 6; --w: 250px; --h: 100px;">
<h1>300k</h1>
</shape>
<shape class="border" style="--value: 6; --w: 250px; --h: 100px;">
<h1>300k</h1>
</shape>
</grid>
<block class="sized pad center-self solid border" style="--value: 9; --text: 0; --w: 80vw; margin-top: 3rem;">
<shape style="--value: 6; --w: 200px; --h: 150px; position: relative; top: -2rem;">Computer</shape>
<h1>Flexitarian Vice Poutine Synth</h1>
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
<div class="no-flex">
<button>Let's Talk</button>
</div>
</block>
</block>
<block class="pad center-text center">
<h1>Learn More About Marketing</h1>
<a>Link to stuff</a>
<grid style="--cols: 1fr 1fr">
<shape style="--w: 250px; --h: 250px;">
<h1>Image</h1>
</shape>
<shape style="--w: 250px; --h: 250px;">
<h1>Image</h1>
</shape>
<shape style="--w: 250px; --h: 250px;">
<h1>Image</h1>
</shape>
</grid>
</block>
<block class="solid pad center-text" style="--value: 8; --pad: 2rem;">
<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>
</block>
<block class="center solid sized" style="--value: 3; --pad: 2rem; --text: 9; --h: 700px;">
<h1>Footer</h1>
</block>
</body>
</html>

Loading…
Cancel
Save