A simple CSS file to make it easier to layout a web page quickly at the start. It's meant to be removed once you have the basic layout done, but you could probably keep it if you like it.
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.
blockstart/public/blockstart/demos/snapchat.html

122 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;">
3 years ago
<a href="/blockstart/demos/">snap</a>
<div class="horizontal" style="--spacing: space-between; gap: 10px;">
3 years ago
<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;">
3 years ago
<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">
3 years ago
<screen>
<shape style="--w: 150px; --h: 300px;">
<h1>Screen</h1>
</shape>
</screen>
<signup>
3 years ago
<h1>Express yourself with millions of Lenses.</h1>
</signup>
</block>
<hr>
<block class="horizontal">
<signup>
3 years ago
<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">
3 years ago
<screen>
<shape style="--w: 150px; --h: 300px;">
<h1>Screen</h1>
</shape>
</screen>
<signup>
3 years ago
<h1>Express yourself with millions of Lenses.</h1>
</signup>
</block>
<hr>
<block class="horizontal">
<signup>
3 years ago
<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">
3 years ago
<shape style="--w: 200px; --h: 250px;">
<h1>Ghost</h1>
</shape>
<block class="horizontal center">
3 years ago
<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">
3 years ago
<h1 class="center">Footer</h1>
</block>
</blockstart>
</body>
</html>