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

Make it have a max width like the original.

Browse Source
master
Zed A. Shaw 3 years ago
parent bb7881ce4e
commit b2a5d14a67
1 changed files with 210 additions and 171 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. 47
      public/blockstart/demos/breadcrumbs-2.html

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

@ -9,12 +9,18 @@
<link rel="stylesheet" href="/blockstart/blockstart.css"> <link rel="stylesheet" href="/blockstart/blockstart.css">
<style> <style>
:root {
--content-width: 1080px;
}
header { header {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-direction: column; flex-direction: column;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
width: 100%;
max-width: var(--content-width);
} }
header > div { header > div {
@ -61,6 +67,7 @@ a.thin {
pitch-image { pitch-image {
display: flex; display: flex;
padding-bottom: 1rem; padding-bottom: 1rem;
max-width: var(--content-width);
} }
pitch-image > right { pitch-image > right {
@ -90,6 +97,7 @@ contact-scoring {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
max-width: var(--content-width);
} }
content { content {
@ -129,6 +137,7 @@ footer {
color: var(--value9); color: var(--value9);
background-color: var(--value2); background-color: var(--value2);
padding: 1rem; padding: 1rem;
max-width: var(--content-width);
} }
footer > column { footer > column {
@ -140,11 +149,22 @@ footer > column {
footer > column h5 { footer > column h5 {
margin: 0px; margin: 0px;
} }
panel {
display: flex;
width: 100%;
justify-content: center;
}
panel.dark {
background-color: var(--value2);
}
</style> </style>
</head> </head>
<body> <body>
<header class="yellow"> <panel class="yellow">
<header>
<div> <div>
<a id="logo" href="/blockstart/demos/">Breadcrumbs</a> <a id="logo" href="/blockstart/demos/">Breadcrumbs</a>
</div> </div>
@ -157,8 +177,10 @@ footer > column h5 {
<a href="#" class="button thin">DEMO</a> <a href="#" class="button thin">DEMO</a>
</menu> </menu>
</header> </header>
</panel>
<pitch-image class="yellow"> <panel class="yellow">
<pitch-image>
<left> <left>
<h1>Want More MQLs?</h1> <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> <p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
@ -170,7 +192,9 @@ footer > column h5 {
</shape> </shape>
</right> </right>
</pitch-image> </pitch-image>
</panel>
<panel>
<pitch-image> <pitch-image>
<left> <left>
<h2>Get Started in 3 Simple Steps</h2> <h2>Get Started in 3 Simple Steps</h2>
@ -189,8 +213,10 @@ footer > column h5 {
</shape> </shape>
</right> </right>
</pitch-image> </pitch-image>
</panel>
<pitch-image class="yellow"> <panel class="yellow">
<pitch-image>
<left> <left>
<shape style="--w: 250px; --h: 250px;"> <shape style="--w: 250px; --h: 250px;">
<h1>People</h1> <h1>People</h1>
@ -201,7 +227,9 @@ footer > column h5 {
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p> <p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</right> </right>
</pitch-image> </pitch-image>
</panel>
<panel>
<pitch-image> <pitch-image>
<left> <left>
<h1>Don't Let Your Tech Stack Hold You Hostage</h1> <h1>Don't Let Your Tech Stack Hold You Hostage</h1>
@ -214,7 +242,9 @@ footer > column h5 {
</shape> </shape>
</right> </right>
</pitch-image> </pitch-image>
</panel>
<panel class="yellow">
<companies> <companies>
<div id="title">Works with your <b>tech stack</b> in just a few clicks.</div> <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> <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>
@ -228,7 +258,9 @@ footer > column h5 {
<span>companies</span> <span>companies</span>
</companies-list> </companies-list>
</companies> </companies>
</panel>
<panel>
<pitch-image> <pitch-image>
<left> <left>
<shape style="--w: 250px; --h: 250px;"> <shape style="--w: 250px; --h: 250px;">
@ -240,7 +272,9 @@ footer > column h5 {
<p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p> <p>I'm baby kogi heirloom truffaut succulents plaid normcore microdosing craft beer gochujang humblebrag bitters bicycle rights gastropub keytar.</p>
</right> </right>
</pitch-image> </pitch-image>
</panel>
<panel>
<pitch-image> <pitch-image>
<left> <left>
<h1>Time Kills Deals, For Real</h1> <h1>Time Kills Deals, For Real</h1>
@ -252,8 +286,10 @@ footer > column h5 {
</shape> </shape>
</right> </right>
</pitch-image> </pitch-image>
</panel>
<contact-scoring class="solid"> <panel class="yellow">
<contact-scoring>
<content> <content>
<h1>Contact Scoring? Never Heard of it...</h1> <h1>Contact Scoring? Never Heard of it...</h1>
@ -266,7 +302,9 @@ footer > column h5 {
<h1>Pillars</h1> <h1>Pillars</h1>
</shape> </shape>
</contact-scoring> </contact-scoring>
</panel>
<panel class="dark">
<footer> <footer>
<column> <column>
<a id="logo" style="color: var(--value9);" href="/blockstart/demos/">Breadcrumbs</a> <a id="logo" style="color: var(--value9);" href="/blockstart/demos/">Breadcrumbs</a>
@ -316,5 +354,6 @@ footer > column h5 {
</column> </column>
</footer> </footer>
</panel>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save