learn-javascript-the-hard-way
/
blockstart
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add in todoist as a demo.

Browse Source
master
Zed A. Shaw 2 years ago
parent 7c7737c3cb
commit 4bc81d7da7
5 changed files with 162 additions and 5 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

3
package.json
Unescape View File

@ -4,7 +4,8 @@
"description": "A CSS file for doing initial layouts quickly.",
"main": "index.js",
"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": {
"type": "git",

2
public/demos/asana.html
Unescape View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<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">

2
public/demos/canva.html
Unescape View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<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">

5
public/demos/index.html
Unescape View File

@ -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>
<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="/demos/canva.html">Canva</a></shape>
<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>

155
public/demos/todoist.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save