|
|
|
|
@ -9,21 +9,152 @@ |
|
|
|
|
<link rel="stylesheet" href="/blockstart/blockstart.css"> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
h1 { |
|
|
|
|
font-size: 2.5em; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
</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> | |
|
|
|
|
<a href="/blockstart/#docs">Docs</a> | |
|
|
|
|
<a href="/blockstart/demos/">Demos</a> | |
|
|
|
|
<a href="/blockstart/blockstart.css">Download</a> |
|
|
|
|
</div> |
|
|
|
|
<block class="horizontal pad"> |
|
|
|
|
<h4>square</h4> |
|
|
|
|
<h4 class="no-flex" style="align-self: end;">S | =</h4> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<block class="pad sized center" style="--w: 80vw; --pad: 2rem;"> |
|
|
|
|
<h1>Flexible business solutions that work for you.</h1> |
|
|
|
|
<block class="horizontal" style="--spacing: start;"> |
|
|
|
|
<button class="no-flex pad border">get started</button> |
|
|
|
|
<button class="no-flex pad border">contact sales</button> |
|
|
|
|
</block> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<shape style="--w: 100%; --h: 400px;"> |
|
|
|
|
<h1>Image</h1> |
|
|
|
|
</shape> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<content class="center sized" style="--w: 80vw;"> |
|
|
|
|
<block class="sized" style="--h: 300px;"> |
|
|
|
|
<h1 class="center">Tools that connect every side of your business.</h1> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<block class="border" style="--border-radius: 10px;"> |
|
|
|
|
<top class="pad" style="--pad: 1.5rem;"> |
|
|
|
|
<h3>Commerce</h3> |
|
|
|
|
<blurb>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</blurb> |
|
|
|
|
|
|
|
|
|
<a href="#">See commerce solutions</a> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<block class="horizontal" style="--spacing: start"> |
|
|
|
|
<button class="no-flex">Point of sale</button> |
|
|
|
|
<button class="no-flex">Online store</button> |
|
|
|
|
<button class="no-flex">Payments</button> |
|
|
|
|
</block> |
|
|
|
|
</top> |
|
|
|
|
<bottom> |
|
|
|
|
<shape style="--w: 80vw; --h: 300px;"> |
|
|
|
|
<h1>Ipad</h1> |
|
|
|
|
</shape> |
|
|
|
|
</bottom> |
|
|
|
|
</block> |
|
|
|
|
</content> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<block class="sized center" style="--h: 300px; --w: 80vw;"> |
|
|
|
|
<h1 class="center">Solution sets for every business type and size.</h1> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
<grid style="font-size: 1.5em; --cols: 1fr; --rows: 1fr 1fr 1fr 1fr"> |
|
|
|
|
<block class="horizontal pad" style="--pad: 1.5rem; border-bottom: 1px solid var(--value5);"> |
|
|
|
|
<h4>Retail</h4> |
|
|
|
|
<span class="no-flex">+</span> |
|
|
|
|
</block> |
|
|
|
|
<block class="horizontal pad" style="--pad: 1.5rem; border-bottom: 1px solid var(--value5);"> |
|
|
|
|
<h4>Food & beverage</h4> |
|
|
|
|
<span class="no-flex">+</span> |
|
|
|
|
</block> |
|
|
|
|
<block class="horizontal pad" style="--pad: 1.5rem; border-bottom: 1px solid var(--value5);"> |
|
|
|
|
<h4>Professional services</h4> |
|
|
|
|
<span class="no-flex">+</span> |
|
|
|
|
</block> |
|
|
|
|
<block class="horizontal pad" style="--pad: 1.5rem; border-bottom: 1px solid var(--value5);"> |
|
|
|
|
<h4>Large businesses</h4> |
|
|
|
|
<span class="no-flex">+</span> |
|
|
|
|
</block> |
|
|
|
|
</grid> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<block class="sized" style="--w: 80vw; --h: 300px;"> |
|
|
|
|
<h1 class="center">Meet the new Square Stand.</h1> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<shape style="--w: 100%; --h: 500px; --value: 5;"> |
|
|
|
|
<h1>Square Stand</h1> |
|
|
|
|
</shape> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<block class="center sized" style="--spacing: start; --w: 80vw; --h: 300px"> |
|
|
|
|
<h3>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</h3> |
|
|
|
|
|
|
|
|
|
<div>$149 or blah blah</div> |
|
|
|
|
|
|
|
|
|
<a href="#">Explore Square Stand -></a> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<content class="solid"> |
|
|
|
|
<block class="center sized" style="--w: 80vw; --h: 200px;"> |
|
|
|
|
<h1>Resources to keep you moving forward.</h1> |
|
|
|
|
<div>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</div> |
|
|
|
|
<a href="">Visit our fill resource hub</a> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<shape class="center border" style="--w: 80vw; --h: 450px; --border-radius: 10px;"> |
|
|
|
|
<h1>Person</h1> |
|
|
|
|
</shape> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<block class="center sized" style="--w: 80vw; --h: 200px;"> |
|
|
|
|
<h3>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</h3> |
|
|
|
|
<div>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</div> |
|
|
|
|
<a href="">Visit our fill resource hub</a> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<shape class="center border" style="--w: 80vw; --h: 450px; --border-radius: 10px;"> |
|
|
|
|
<h1>Person</h1> |
|
|
|
|
</shape> |
|
|
|
|
<hr> |
|
|
|
|
</content> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<block class="center sized pad" style="--w: 80vw;"> |
|
|
|
|
<h1>Get real support.</h1> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<block class="solid border pad"> |
|
|
|
|
<h4>Flexitarian Vice Poutine Synth</h4> |
|
|
|
|
<div>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</div> |
|
|
|
|
<a href="">Contact sales</a> |
|
|
|
|
</block> |
|
|
|
|
<hr> |
|
|
|
|
<block class="solid border pad"> |
|
|
|
|
<h4>Flexitarian Vice Poutine Synth</h4> |
|
|
|
|
<div>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</div> |
|
|
|
|
<a href="">Contact sales</a> |
|
|
|
|
</block> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<block class="sized solid center-text" style="--value: 0; --text: 9; --h: 500px;"> |
|
|
|
|
<h1>Footer</h1> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<h1>Coming soon...</h1> |
|
|
|
|
</body> |
|
|
|
|
</html> |
|
|
|
|
|
