Added the breadcrumbs.io demo.

master
Zed A. Shaw 2 years ago
parent 94f8a21c17
commit a4fbd15d32
  1. 129
      public/blockstart/demos/breadcrumbs.html

@ -14,16 +14,129 @@
</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> &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>
<block class="pad solid" style="--spacing: space-around; width: unset; --vlaue: 8;">
<div>
<a href="/blockstart/"><h4>Breadcrumbs</h4></a>
</div>
<block class="horizontal" style="--spacing: end; font-size: 0.9em;">
<a href="#">Home</a> &nbsp;|&nbsp;
<a href="#">Product</a> &nbsp;|&nbsp;
<a href="#">Pricing</a> &nbsp;|&nbsp;
<a href="#">Resources</a> &nbsp;|&nbsp;
<a href="#">Login</a> &nbsp;|&nbsp;
<a href="#">Demo</a>
</block>
</block>
<h1>Coming soon...</h1>
<block class="horizontal solid pad" style="--value: 8;">
<left>
<h1>Want More MQLs?</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
<button>LEARN HOW</button>
</left>
<right>
<shape style="--w: 300px; --h: 200px;">
<h1>Faces</h1>
</shape>
</right>
</block>
<block class="horizontal pad">
<left>
<h1>Get Started in 3 Simple Steps</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.</p>
<ol>
<li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
<li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
<li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
</ol>
<a href="#">Learn more</a>
</left>
<right class="pad" style="--pad: 2rem;">
<shape style="--w: 250px; --h: 250px;">
<h1>Steps</h1>
</shape>
</right>
</block>
<block class="horizontal pad solid">
<left class="pad" style="--pad: 2rem;">
<shape style="--w: 250px; --h: 250px;">
<h1>People</h1>
</left>
<right class="pad">
<h1>Flexitarian Vice Poutine Synth</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</right>
</block>
<block class="horizontal pad">
<left>
<h1>Don't Let Your Tech Stack Hold You Hostage</h1>
<p>Meh art party locavore forage readymade raw denim trust fund humblebrag tumblr lyft. Fixie pour-over chicharrones farm-to-table tumblr, godard church-key live-edge dreamcatcher mixtape hot chicken.</p>
</left>
<right class="pad" style="--pad: 2rem;">
<shape style="--w: 250px; --h: 250px;">
<h1>Toolbox</h1>
</shape>
</right>
</block>
<block class="center center-text pad solid" style="--value: 8;">
<h4>Works with your <b>tech stack</b> in just a few clicks.</h4>
<span class="pad">Cardigan raclette tbh, kitsch lomo fanny pack vegan. Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</span>
<block class="horizontal">
<span>companies</span>
<span>companies</span>
<span>companies</span>
<span>companies</span>
<span>companies</span>
<span>companies</span>
</block>
</block>
<block class="horizontal pad">
<left class="pad" style="--pad: 2rem;">
<shape style="--w: 250px; --h: 250px;">
<h1>Super Handshake</h1>
</left>
<right class="pad">
<h1>Life is Lonely Marooned on an Island</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</right>
</block>
<block class="horizontal pad">
<left class="pad">
<h1>Time Kills Deals, For Real</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</left>
<right class="pad" style="--pad: 2rem;">
<shape style="--w: 250px; --h: 250px;">
<h1>Accountant</h1>
</right>
</block>
<block class="solid center center-text">
<content class="pad">
<h1>Contact Scoring? Never Heard of it...</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>
<a class="pad" href="#">Learn more about contact scoring</a>
</content>
<hr>
<shape style="--h: 400px; --value: 7;">
<h1>Pillars</h1>
</shape>
</block>
<block class="solid center-text sized" style="--h: 600px; --value: 2; --text: 9;">
<h1 class="center-self">Footer</h1>
</block>
</body>
</html>

Loading…
Cancel
Save