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.
51 lines
2.1 KiB
51 lines
2.1 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>blockstart.css Demos</title>
|
|
<link rel="stylesheet" href="/blockstart/blockstart.css">
|
|
<style>
|
|
grid > shape {
|
|
--w: 150px;
|
|
--h: 150px;
|
|
}
|
|
</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>
|
|
|
|
<content class="pad center" style="--pad: 2rem;">
|
|
<h1>Demos</h1>
|
|
|
|
<p>Here are a few simple demos of using <a href="/blockstart/blockstart.css">blockstart.css</a> to create copies of landing pages. Copying other websites is a great way to learn web development. The text in the demos is either taken from the "inspiration" site, or is from <a href="https://hipsum.co/">hipster ipsum</a>.</p>
|
|
|
|
<grid class="center" style="--gap: 1rem; --cols: 1fr 1fr 1fr; --text: 9">
|
|
<shape><a href="asana.html">Asana</a></shape>
|
|
<shape><a href="canva.html">Canva</a></shape>
|
|
<shape><a href="todoist.html">Todoist</a></shape>
|
|
<shape><a href="square.html">Square</a></shape>
|
|
<shape><a href="earlybird.html">Earlybird</a></shape>
|
|
<shape><a href="pandadoc.html">Pandadoc</a></shape>
|
|
<shape><a href="vimeo.html">Vimeo</a></shape>
|
|
<shape><a href="wordstream.html">Wordstream</a></shape>
|
|
<shape><a href="breadcrumbs.html">Breadcrumbs</a></shape>
|
|
<shape><a href="vidyard.html">Vidyard</a></shape>
|
|
<shape><a href="snapchat.html">Snapchat</a></shape>
|
|
<shape><a href="patreon.html">Patreon</a></shape>
|
|
<shape><a href="shopify.html">Shopify</a></shape>
|
|
<shape><a href="slack.html">Slack</a></shape>
|
|
<shape><a href="zoom.html">Zoom</a></shape>
|
|
</grid>
|
|
</content>
|
|
</body>
|
|
</html>
|
|
|