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.
176 lines
4.9 KiB
176 lines
4.9 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Blockstart Template</title>
|
|
|
|
<link rel="stylesheet" href="/blockstart/blockstart.css">
|
|
|
|
<style>
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
|
|
<a href="/blockstart/demos/">wordstream</a>
|
|
<div class="horizontal" style="--spacing: end;">
|
|
<span>=</span> |
|
|
<span>O</span>
|
|
</div>
|
|
</block>
|
|
|
|
<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>
|
|
|