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

Started a stage 2 demo using breadcrumbs.io again.

Browse Source
master
Zed A. Shaw 2 years ago
parent 4bf84fda1b
commit d861b8da41
2 changed files with 271 additions and 6 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. 262
      public/blockstart/demos/breadcrumbs-2.html
  2. 15
      public/blockstart/demos/breadcrumbs.html

262
public/blockstart/demos/breadcrumbs-2.html
Unescape View File

@ -0,0 +1,262 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blockstart Breadcrumbs -- Statement 2</title>
<link rel="stylesheet" href="/blockstart/blockstart.css">
<style>
header {
display: flex;
justify-content: space-around;
flex-direction: column;
padding-left: 1rem;
padding-right: 1rem;
}
header > div {
padding-top: 0.5rem;
}
header > menu {
display: flex;
justify-content: end;
font-size: 0.9em;
}
header > div a {
text-decoration: none;
}
header > menu a {
margin-left: 1rem;
text-decoration: none;
font-size: 0.7em;
align-self: center;
font-weight: 600;
}
a.button {
display: flex;
padding: 1rem;
background-color: var(--value3);
color: var(--value9);
border-radius: 30px;
text-decoration: none;
justify-content: center;
}
a.thin {
background-color: var(--value8);
border: 1px solid var(--value3);
color: var(--value0);
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
pitch-image {
display: flex;
padding-bottom: 1rem;
}
pitch-image > right {
display: flex;
padding: 1rem;
flex-direction: column;
justify-content: center;
}
pitch-image > left {
display: flex;
padding: 1rem;
flex-direction: column;
}
pitch-image h2 {
margin-top: 0px;
}
.yellow {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: var(--value8);
}
contact-scoring {
display: flex;
flex-direction: column;
text-align: center;
}
content {
padding: 1rem;
}
footer {
min-height: 600px;
color: var(--value9);
background-color: var(--value2);
text-align: center;
}
companies {
display: flex;
flex-direction: column;
background-color: var(--value8);
text-align: center;
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 1rem;
padding-right: 1rem;
}
companies #title {
font-size: 1.5em;
}
companies-list {
display: flex;
justify-content: space-between;
font-weight: 500;
}
a#logo {
font-size: 1.2em;
font-weight: 600;
}
</style>
</head>
<body>
<header class="yellow">
<div>
<a id="logo" href="/blockstart/demos/">Breadcrumbs</a>
</div>
<menu>
<a href="#">HOME</a>
<a href="#">PRODUCT</a>
<a href="#">PRICING</a>
<a href="#">RESOURCES</a>
<a href="#">LOGIN</a>
<a href="#" class="button thin">DEMO</a>
</menu>
</header>
<pitch-image class="yellow">
<left>
<h1>Want More MQLs?</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
<a href="#" class="button">LEARN HOW</a>
</left>
<right>
<shape style="--w: 300px; --h: 200px;">
<h1>Faces</h1>
</shape>
</right>
</pitch-image>
<pitch-image>
<left>
<h2>Get Started in 3 Simple Steps</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.</p>
<ol>
<li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
<li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
<li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
</ol>
<a href="#">Learn more</a>
</left>
<right>
<shape id="steps-image" style="--w: 250px; --h: 250px;">
<h1>Steps</h1>
</shape>
</right>
</pitch-image>
<pitch-image class="yellow">
<left>
<shape style="--w: 250px; --h: 250px;">
<h1>People</h1>
</shape>
</left>
<right>
<h1>Flexitarian Vice Poutine Synth</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</right>
</pitch-image>
<pitch-image>
<left>
<h1>Don't Let Your Tech Stack Hold You Hostage</h1>
<p>Meh art party locavore forage readymade raw denim trust fund humblebrag tumblr lyft. Fixie pour-over chicharrones farm-to-table tumblr, godard church-key live-edge dreamcatcher mixtape hot chicken.</p>
</left>
<right>
<shape style="--w: 250px; --h: 250px;">
<h1>Toolbox</h1>
</shape>
</right>
</pitch-image>
<companies>
<div id="title">Works with your <b>tech stack</b> in just a few clicks.</div>
<span class="pad">Cardigan raclette tbh, kitsch lomo fanny pack vegan.<br> Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</span>
<companies-list>
<span>companies</span>
<span>companies</span>
<span>companies</span>
<span>companies</span>
<span>companies</span>
<span>companies</span>
</companies-list>
</companies>
<pitch-image>
<left>
<shape style="--w: 250px; --h: 250px;">
<h1>Super Handshake</h1>
</shape>
</left>
<right>
<h1>Life is Lonely Marooned on an Island</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</right>
</pitch-image>
<pitch-image>
<left>
<h1>Time Kills Deals, For Real</h1>
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</left>
<right>
<shape style="--w: 250px; --h: 250px;">
<h1>Accountant</h1>
</shape>
</right>
</pitch-image>
<contact-scoring class="solid">
<content>
<h1>Contact Scoring? Never Heard of it...</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>
<a class="pad" href="#">Learn more about contact scoring</a>
</content>
<hr>
<shape style="--h: 400px; --value: 7;">
<h1>Pillars</h1>
</shape>
</contact-scoring>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>

15
public/blockstart/demos/breadcrumbs.html
Unescape View File

@ -62,8 +62,9 @@
<block class="horizontal pad solid">
<left class="pad" style="--pad: 2rem;">
<shape style="--w: 250px; --h: 250px;">
<h1>People</h1>
<shape style="--w: 250px; --h: 250px;">
<h1>People</h1>
</shape>
</left>
<right class="pad">
<h1>Flexitarian Vice Poutine Synth</h1>
@ -100,8 +101,9 @@
<block class="horizontal pad">
<left class="pad" style="--pad: 2rem;">
<shape style="--w: 250px; --h: 250px;">
<h1>Super Handshake</h1>
<shape style="--w: 250px; --h: 250px;">
<h1>Super Handshake</h1>
</shape>
</left>
<right class="pad">
<h1>Life is Lonely Marooned on an Island</h1>
@ -115,8 +117,9 @@
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</left>
<right class="pad" style="--pad: 2rem;">
<shape style="--w: 250px; --h: 250px;">
<h1>Accountant</h1>
<shape style="--w: 250px; --h: 250px;">
<h1>Accountant</h1>
</shape>
</right>
</block>

Write Preview
Loading…
Cancel
Save