|
|
|
|
@ -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> | |
|
|
|
|
<a href="/blockstart/#docs">Docs</a> | |
|
|
|
|
<a href="/blockstart/demos/">Demos</a> | |
|
|
|
|
<a href="/blockstart/blockstart.css">Download</a> |
|
|
|
|
<a href="/blockstart/demos/">=</a> | |
|
|
|
|
<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> |
|
|
|
|
|
