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.
172 lines
4.9 KiB
172 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>
|
|
h1 {
|
|
font-size: 2.5em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<blockstart>
|
|
<block class="horizontal pad">
|
|
<h4><a href="/blockstart/demos/">square</a></h4>
|
|
<h4 class="no-flex" style="align-self: end;">S | =</h4>
|
|
</block>
|
|
|
|
<block class="horizontal" style="--pad: 2rem;">
|
|
<left style="--w: 50%">
|
|
<div>
|
|
<h1>Power your business with square.</h1>
|
|
<p>Millions of brands of all sizes trust Square to accept payments, build customer relationships, and grow their business in-store and online.</p>
|
|
</div>
|
|
|
|
<block class="horizontal" style="--spacing: start;">
|
|
<button class="no-flex border" style="--pad: 1rem;">get started</button>
|
|
<button class="no-flex border" style="--pad: 1rem;">contact sales</button>
|
|
</block>
|
|
</left>
|
|
|
|
<shape style="--w: 50%; --h: 400px;">
|
|
<h1>Image</h1>
|
|
</shape>
|
|
</block>
|
|
|
|
<hr>
|
|
<shape style="--w: 100%; --h: 400px;">
|
|
<h1>Image</h1>
|
|
</shape>
|
|
|
|
<hr>
|
|
<block class="center" style="--w: 80vw;">
|
|
<block class="compact" 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="border">Point of sale</button>
|
|
<button class="border">Online store</button>
|
|
<button class="border">Payments</button>
|
|
</block>
|
|
</top>
|
|
<bottom>
|
|
<shape style="--w: 100%; --h: 300px;">
|
|
<h1>Ipad</h1>
|
|
</shape>
|
|
</bottom>
|
|
</block>
|
|
</block>
|
|
|
|
|
|
<block class="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: 1; --rows: 4;">
|
|
<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 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" 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>
|
|
<block class="solid">
|
|
<block class="solid center" 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 solid" 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>
|
|
</block>
|
|
|
|
|
|
<block class="center" 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="solid center-text" style="--value: 0; --text: 9; --h: 500px;">
|
|
<h1>Footer</h1>
|
|
</block>
|
|
|
|
</blockstart>
|
|
</body>
|
|
</html>
|
|
|