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.
36 lines
1.4 KiB
36 lines
1.4 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.css">
|
|
<style>
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
|
|
<div>blockstart.css</div>
|
|
<div class="horizontal" style="--spacing: end;">
|
|
<a href="/#about">About</a> |
|
|
<a href="/#docs">Docs</a> |
|
|
<a href="/demos/">Demos</a> |
|
|
<a href="/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.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="--cols: 1fr 1fr; --text: 9">
|
|
<shape style="--w: 150px; --h: 150px;"><a href="asana.html">Asana</a></shape>
|
|
<shape style="--w: 150px; --h: 150px;"><a href="canva.html">Canva</a></shape>
|
|
<shape style="--w: 150px; --h: 150px;"><a href="todoist.html">Todoist</a></shape>
|
|
</grid>
|
|
|
|
</content>
|
|
</body>
|
|
</html>
|
|
|