|
|
|
|
@ -13,17 +13,105 @@ |
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
<body class="solid" style="--value: 8"> |
|
|
|
|
<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> |
|
|
|
|
<a href="/blockstart/demos/">snap</a> |
|
|
|
|
<div class="horizontal" style="--spacing: space-evenly;"> |
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
<h1>Coming soon...</h1> |
|
|
|
|
<block class="sized" style="--h: 500px;"> |
|
|
|
|
<div class="center sized" 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="sized center horizontal" style="--w: 500px;"> |
|
|
|
|
<screen> |
|
|
|
|
<shape style="--w: 150px; --h: 300px;"> |
|
|
|
|
<h1>Screen</h1> |
|
|
|
|
</shape> |
|
|
|
|
</screen> |
|
|
|
|
<signup class="pad"> |
|
|
|
|
<h1>Express yourself with millions of Lenses.</h1> |
|
|
|
|
</signup> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<block class="sized center horizontal" style="--w: 500px;"> |
|
|
|
|
<signup class="pad"> |
|
|
|
|
<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="sized center horizontal" style="--w: 500px;"> |
|
|
|
|
<screen> |
|
|
|
|
<shape style="--w: 150px; --h: 300px;"> |
|
|
|
|
<h1>Screen</h1> |
|
|
|
|
</shape> |
|
|
|
|
</screen> |
|
|
|
|
<signup class="pad"> |
|
|
|
|
<h1>Express yourself with millions of Lenses.</h1> |
|
|
|
|
</signup> |
|
|
|
|
</block> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
<block class="sized center horizontal" style="--w: 500px;"> |
|
|
|
|
<signup class="pad"> |
|
|
|
|
<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 center-text"> |
|
|
|
|
<shape style="--w: 200px; --h: 250px;"> |
|
|
|
|
<h1>Ghost</h1> |
|
|
|
|
</shape> |
|
|
|
|
|
|
|
|
|
<block class="horizontal"> |
|
|
|
|
<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 class="sized solid" style="--h: 400px; --value: 9"> |
|
|
|
|
<h1 class="center">Footer</h1> |
|
|
|
|
</block> |
|
|
|
|
</body> |
|
|
|
|
</html> |
|
|
|
|
|
