Add placeholders for all demos.

master
Zed A. Shaw 8 months ago
parent a54dfcda72
commit 216fd15479
  1. 29
      public/blockstart/demos/breadcrumbs.html
  2. 29
      public/blockstart/demos/earlybird.html
  3. 22
      public/blockstart/demos/index.html
  4. 29
      public/blockstart/demos/pandadoc.html
  5. 29
      public/blockstart/demos/patreon.html
  6. 29
      public/blockstart/demos/shopify.html
  7. 29
      public/blockstart/demos/slack.html
  8. 29
      public/blockstart/demos/snapchat.html
  9. 29
      public/blockstart/demos/square.html
  10. 29
      public/blockstart/demos/vidyard.html
  11. 29
      public/blockstart/demos/vimeo.html
  12. 29
      public/blockstart/demos/wordstream.html
  13. 29
      public/blockstart/demos/zoom.html
  14. 2
      public/blockstart/index.html

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -6,6 +6,10 @@
<title>blockstart.css Demos</title>
<link rel="stylesheet" href="/blockstart/blockstart.css">
<style>
grid > shape {
--w: 150px;
--h: 150px;
}
</style>
</head>
@ -26,9 +30,21 @@
<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 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>
<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>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -0,0 +1,29 @@
<!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>
</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> &nbsp;|&nbsp;
<a href="/blockstart/#docs">Docs</a> &nbsp;|&nbsp;
<a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
<a href="/blockstart/blockstart.css">Download</a>
</div>
</block>
<h1>Coming soon...</h1>
</body>
</html>

@ -341,7 +341,7 @@ npx http-server -d -c-1 public
</code>
</pre>
<p>Once you do that you can place the <a href="/blockstart/blockstart.css">blockstart.css</a> in the <code>public/</code> directory and start putting your <code>.html</code> files in the same place. Here's a decen starter template:</p>
<p>Once you do that you can place the <a href="/blockstart/blockstart.css">blockstart.css</a> in the <code>public/</code> directory and start putting your <code>.html</code> files in the same place. Here's a reasonable starter template:</p>
<pre>
<code>

Loading…
Cancel
Save