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

Finished a first cut of the earlybird demo.

Browse Source
master
Zed A. Shaw 2 years ago
parent 3a7c7058fc
commit 5effc3c295
2 changed files with 192 additions and 9 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. 4
      public/blockstart/blockstart.css
  2. 197
      public/blockstart/demos/earlybird.html

4
public/blockstart/blockstart.css
Unescape View File

@ -122,6 +122,10 @@ hr {
visibility: hidden;
}
hr.huge {
--height: 3rem;
}
shape {
--w: 100%;
--h: 100%;

197
public/blockstart/demos/earlybird.html
Unescape View File

@ -9,21 +9,200 @@
<link rel="stylesheet" href="/blockstart/blockstart.css">
<style>
body {
font-size: 1.5em;
}
h1 {
font-size: 3em;
}
block > * {
margin-bottom: 1rem;
}
</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 class="horizontal pad">
<div>=</div>
<div>logo</div>
<button class="no-flex">Send A Gift</button>
</block>
<block class="solid">
<block class="center-self sized pad" style="--w: 800px;">
<h1>Invest early,<br>grow together.</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.<p>
<ul>
<li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
<li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
<li>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</li>
</ul>
<button class="no-flex pad border"
style="align-self: start; padding-left: 2rem; padding-right: 2rem;">
Get Started
</button>
<span class="no-flex">
<button class="pad border solid"
style="align-self: start; --value: 0; color: var(--value9);">
App Store
</button>
<button class="pad border solid"
style="align-self: start; --value: 0; color: var(--value9);">
Google Play
</button>
</span>
</block>
<shape style="--w: 500px; --h: 600px;">
<h1>Illustration</h1>
</shape>
</block>
<content class="center sized" style="--w: 1080px;">
<block class="center center-text sized" style="--h: 200px; padding-top: 3rem;">
<h4>As Featured In</h4>
<block class="horizontal">
<span>Yahoo!</span>
<span>TechCrunch</span>
<span>MarketWatch</span>
<span>Business Insider</span>
</block>
</block>
<block class="center center-text">
<h3>FOR PARENTS</h3>
<h1>Invest today,<br>
and change their<br>
tomorrow.
</h1>
<shape style="--w: 300px; --h: 500px;">
<h1>Phone</h1>
</shape>
<block class="center-self sized" style="--w: 300px;">
<h4> Build your nest</h4>
<span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span>
</block>
</block>
<hr>
<block class="center center-text">
<h1>Create lasting memories</h1>
<span>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</span>
<shape style="--w: 800px; --h: 450px;">
<h1>Video</h1>
</shape>
</block>
<hr class="huge">
<block class="center center-text">
<h4>TRUST AND SECURITY</h4>
<h1>Keeping your<br>investments safe.</h1>
<block class="center">
<shape style="--w: 80px; --h: 80px;">
<b>Shield</b>
</shape>
<h4>Safe &amp; Secure</h4>
<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.</p>
</block>
</block>
<hr class="huge">
<block class="center center-text">
<h1>See how we're different.</h1>
<grid style="--cols: 1fr 1fr 1fr;">
<block>
<shape style="--w: 80px; --h: 80px;">
Image
</shape>
<h3>Financial Literacy</h3>
<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>
</block>
<block>
<shape style="--w: 80px; --h: 80px;">
Image
</shape>
<h3>Financial Literacy</h3>
<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>
</block>
<block>
<shape style="--w: 80px; --h: 80px;">
Image
</shape>
<h3>Financial Literacy</h3>
<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>
</block>
</grid>
</block>
</content>
<block class="center center-text solid pad">
<h2>Already have a 529?</h2>
<p class="center sized" style="--w: 50%">I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
<button class="no-flex">See FAQs</button>
</block>
<block class="center center-text solid pad">
<h2>Get ready to build the next.</h2>
<p class="center sized" style="--w: 50%">I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
<button class="no-flex">Get Started</button>
</block>
<content class="center sized center-text pad" style="--w: 1080px;">
<hr>
<block class="center center-text">
<h4>TRUST AND SECURITY</h4>
<h1>Your child's journey to financial freedom starts here.</h1>
<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>
</block>
<hr>
<shape style="--w: 500px; --h: 500px;">
<h1>illustration</h1>
</shape>
<hr>
<block class="center center-text">
<h1>See what people are saying.</h1>
<shape style="--w: 500px; --h: 500px;">
<h1>Person</h1>
</shape>
<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>
</block>
</content>
<block class="solid sized center center-text" style="--h: 500px;; ">
<h1 class="no-flex">It's time to build the nest.</h1>
<p class="no-flex">Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
<button class="no-flex pad">Get Started</button>
</block>
<h1>Coming soon...</h1>
<block class="solid sized center" style="--h: 800px; --value: 3; --text: 9;">
<h1 class="no-flex">Footer</h1>
</block>
</body>
</html>

Write Preview
Loading…
Cancel
Save