|
|
|
|
@ -14,16 +14,104 @@ |
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
<block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;"> |
|
|
|
|
<a href="/blockstart/">blockstart.css</a> |
|
|
|
|
<block class="solid horizontal pad" style="--value: 0; --text: 9; --spacing: space-around; width: unset;"> |
|
|
|
|
<a href="/blockstart/">vimeo</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> |
|
|
|
|
<button>New video</button> |
|
|
|
|
</div> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<h1>Coming soon...</h1> |
|
|
|
|
<block class="center-text solid pad" style="--value: 0; --text: 9;"> |
|
|
|
|
<h1>Scrolling thing</h1> |
|
|
|
|
<h1>With Vimeo</h1> |
|
|
|
|
|
|
|
|
|
<block class="center horizontal sized" style="--w: 60vw; --text: 0"> |
|
|
|
|
<button>See plans</button> |
|
|
|
|
<button>Join for free</button> |
|
|
|
|
</block> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<block class="pad"> |
|
|
|
|
<shape style="--w: 450px; --h: 500px"> |
|
|
|
|
<h1>Scroll Sample</h1> |
|
|
|
|
</shape> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<block class="pad"> |
|
|
|
|
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p> |
|
|
|
|
|
|
|
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<block class="pad solid" style="--pad: 2rem; --value: 0; --text: 9;"> |
|
|
|
|
<shape class="border" style="--value: 9; --text: 0; --h: 400px; --w: 300px;"> |
|
|
|
|
<h1>Video Marketing</h1> |
|
|
|
|
</shape> |
|
|
|
|
<shape class="border" style="--value: 9; --text: 0; --h: 400px; --w: 300px;"> |
|
|
|
|
<h1>Video Marketing</h1> |
|
|
|
|
</shape> |
|
|
|
|
<shape class="border" style="--value: 9; --text: 0; --h: 400px; --w: 300px;"> |
|
|
|
|
<h1>Video Marketing</h1> |
|
|
|
|
</shape> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<block class="sized center pad" style="--w: 80vw;"> |
|
|
|
|
<block class="center-text"> |
|
|
|
|
<h4>INTEGRATIONS</h4> |
|
|
|
|
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<grid class="center sized pad" style="--cols: 1fr 1fr; --pad: 2rem"> |
|
|
|
|
<block class="center-text pad"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
<block class="center-text pad"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
<block class="center-text pad"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
<block class="center-text pad"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
<block class="center-text pad"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
<block class="center-text pad"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
<block class="center-text pad"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
<block class="center-text pad"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
<block class="center-text pad" style="grid-column: 1 / span 2"> |
|
|
|
|
<h1>Company</h1> |
|
|
|
|
</block> |
|
|
|
|
</grid> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<block class="pad solid center-text" style="--value: 0; --text: 9; --pad: 2rem;"> |
|
|
|
|
<h1>Flexitarian Vice Poutine Synth</h1> |
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
<shape style="--h: 400px; --value: 5;"> |
|
|
|
|
<h1>Scroller</h1> |
|
|
|
|
</shape> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
<h1>Ready to unlock the power of video?</h1> |
|
|
|
|
|
|
|
|
|
<block class="center" style="--text: 0;"> |
|
|
|
|
<button>See plans</button> |
|
|
|
|
<button>Join for free</button> |
|
|
|
|
</block> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<block class="solid sized center" style="--value: 7; --h: 600px;"> |
|
|
|
|
<h1>Footer</h1> |
|
|
|
|
</block> |
|
|
|
|
</body> |
|
|
|
|
</html> |
|
|
|
|
|
