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.
121 lines
2.6 KiB
121 lines
2.6 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>
|
|
body {
|
|
background-color: var(--value8);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="--value: 8">
|
|
<blockstart style="background-color: var(--value8);">
|
|
<block class="horizontal" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
|
|
<a href="/blockstart/demos/">snap</a>
|
|
<div class="horizontal" style="--spacing: space-between; gap: 10px;">
|
|
<a href="#">Advertisers</a>
|
|
<a href="#">Creators</a>
|
|
<a href="#">Developers</a>
|
|
<a href="#">Snap AR</a>
|
|
<a href="#">Features</a>
|
|
<button>Download</button>
|
|
</div>
|
|
</block>
|
|
|
|
<block style="--h: 500px;">
|
|
<div class="center" style="--h: min-content;">
|
|
<h1>Open your <br>
|
|
Snapchat.
|
|
</h1>
|
|
|
|
<block class="horizontal">
|
|
<select>
|
|
<option>US +1</option>
|
|
<input placeholder="Phone Number">
|
|
</select>
|
|
</block>
|
|
|
|
<button>Send Link</button>
|
|
</div>
|
|
</block>
|
|
|
|
<hr>
|
|
<block class="horizontal">
|
|
<screen>
|
|
<shape style="--w: 150px; --h: 300px;">
|
|
<h1>Screen</h1>
|
|
</shape>
|
|
</screen>
|
|
<signup>
|
|
<h1>Express yourself with millions of Lenses.</h1>
|
|
</signup>
|
|
</block>
|
|
|
|
<hr>
|
|
<block class="horizontal">
|
|
<signup>
|
|
<h1>Express yourself with millions of Lenses.</h1>
|
|
</signup>
|
|
<screen>
|
|
<shape style="--w: 150px; --h: 300px;">
|
|
<h1>Screen</h1>
|
|
</shape>
|
|
</screen>
|
|
</block>
|
|
|
|
<hr>
|
|
<block class="horizontal">
|
|
<screen>
|
|
<shape style="--w: 150px; --h: 300px;">
|
|
<h1>Screen</h1>
|
|
</shape>
|
|
</screen>
|
|
<signup>
|
|
<h1>Express yourself with millions of Lenses.</h1>
|
|
</signup>
|
|
</block>
|
|
|
|
<hr>
|
|
<block class="horizontal">
|
|
<signup>
|
|
<h1>Express yourself with millions of Lenses.</h1>
|
|
</signup>
|
|
<screen>
|
|
<shape style="--w: 150px; --h: 300px;">
|
|
<h1>Screen</h1>
|
|
</shape>
|
|
</screen>
|
|
</block>
|
|
|
|
<hr>
|
|
<block class="center-text">
|
|
<shape style="--w: 200px; --h: 250px;">
|
|
<h1>Ghost</h1>
|
|
</shape>
|
|
|
|
<block class="horizontal center">
|
|
<select>
|
|
<option>US +1</option>
|
|
<input placeholder="Phone Number">
|
|
<button>Send Link</button>
|
|
</select>
|
|
</block>
|
|
|
|
<h1>Advertisers</h1>
|
|
<h1>Creators</h1>
|
|
<h1>Developers</h1>
|
|
</block>
|
|
|
|
<block style="--h: 400px; --value: 9">
|
|
<h1 class="center">Footer</h1>
|
|
</block>
|
|
</blockstart>
|
|
</body>
|
|
</html>
|
|
|