Add in todoist as a demo.

master
Zed A. Shaw 2 years ago
parent 7c7737c3cb
commit 4bc81d7da7
  1. 3
      package.json
  2. 2
      public/demos/asana.html
  3. 2
      public/demos/canva.html
  4. 5
      public/demos/index.html
  5. 155
      public/demos/todoist.html

@ -4,7 +4,8 @@
"description": "A CSS file for doing initial layouts quickly.", "description": "A CSS file for doing initial layouts quickly.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1",
"dev": "http-server -d -c-1 public"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blockstart Test</title> <title>Blockstart Demo Asana</title>
<link rel="stylesheet" href="/blockstart.css"> <link rel="stylesheet" href="/blockstart.css">

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blockstart Test</title> <title>Blockstart Demo Canva</title>
<link rel="stylesheet" href="/blockstart.css"> <link rel="stylesheet" href="/blockstart.css">

@ -26,8 +26,9 @@
<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> <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"> <grid class="center" style="--cols: 1fr 1fr; --text: 9">
<shape style="--w: 150px; --h: 150px;"><a href="/demos/asana.html">Asana</a></shape> <shape style="--w: 150px; --h: 150px;"><a href="asana.html">Asana</a></shape>
<shape style="--w: 150px; --h: 150px;"><a href="/demos/canva.html">Canva</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> </grid>
</content> </content>

@ -0,0 +1,155 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blockstart Demo todoist</title>
<link rel="stylesheet" href="/blockstart.css">
<style>
</style>
</head>
<body>
<block class="horizontal pad">
<b>todoist</b>
<div style="align-items: end;">
<span>Log in<span>
&nbsp;
<button>Start For Free</button>
&nbsp;
<span class="font-size: 2em;">=</span>
</div>
</block>
<hr>
<block class="center-text solid">
<h1>Organize your work</h1>
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
<button class="center-self">Start For Free</button>
<hr>
<shape style="--w: 400px; --h: 200px;"><h1>Screenshot</h1></shape>
<block class="pad horizontal">
<left>
300,000 reviews
</left>
<right>
USED BY INDIVIDUALS
</right>
</block>
</block>
<hr>
<content class="sized center" style="--w: 70vw;">
<block class="horizontal">
<left>
<h2>Add your tasks.</h2>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.</p>
</left>
<right>
<shape style="--w: 150px; --h: 300px;">
<h1>Phone</h1>
</shape>
</right>
</block>
<hr>
<block class="horizontal center center-text">
<left>
<shape style="--w: 150px; --h: 300px;">
<h1>Phone</h1>
</shape>
</left>
<right>
<h2>Flexitarian Vice Poutine Synth</h2>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar. Flexitarian vice poutine synth affogato small batch XOXO ramps jianbing quinoa. Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter. Offal franzen fixie, humblebrag tote bag irony jianbing leggings tbh small batch fingerstache hell of tumblr selvage.</p>
</right>
</block>
<hr>
<block class="center center-text">
<h1>Cardigan raclette tbh, kitsch lomo fanny pack vegan</h1>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<hr>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>With you everywhere</h5>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<a href="">Download apps</a>
</block>
<hr>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>With you everywhere</h5>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<a href="">Download apps</a>
</block>
<hr>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>With you everywhere</h5>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<a href="">Download apps</a>
</block>
<hr>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>With you everywhere</h5>
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
<a href="">Download apps</a>
</block>
</block>
<hr>
<block class="center center-text">
<h3>Flexitarian Vice Poutine Synth</h3>
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
<hr>
<grid style="--cols: 1fr 1fr; --rows: 1fr 1fr">
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>30 million+</h5>
<span>app downloads</span>
</block>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>30 million+</h5>
<span>app downloads</span>
</block>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>30 million+</h5>
<span>app downloads</span>
</block>
<block>
<shape style="--w: 80px; --h: 80px;">Icon</shape>
<h5>30 million+</h5>
<span>app downloads</span>
</block>
</grid>
</block>
</content>
<hr>
<block class="horizontal solid">
<left>
<shape style="--w: 250px; --h: 300px;">Flower</shape>
</left>
<right class="center">
<h1>Flexitarian Vice Poutine Synth</h1>
<button>Start for free</button>
</right>
</block>
<block class="sized solid center-text" style="--h: 500px;">
<h1>Footer</h1>
</block>
</body>
</html>
Loading…
Cancel
Save