Redesigned based on the latest improvements where you don't have to use special classes like pad sized etc and can just set variables to change things.
parent
449d72b756
commit
d60045e472
@ -1,273 +0,0 @@ |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
||||
<title>Blockstart Patreon Demo</title> |
||||
|
||||
<link rel="stylesheet" href="/blockstart/blockstart.css"> |
||||
|
||||
<style> |
||||
h1 { |
||||
font-size: 3em; |
||||
} |
||||
|
||||
block { |
||||
margin-top: 2rem; |
||||
} |
||||
|
||||
header { |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-top: 0px; |
||||
padding-left: 1rem; |
||||
padding-right: 1rem; |
||||
padding-top: 0.3rem; |
||||
padding-bottom: 1rem; |
||||
} |
||||
|
||||
input.search { |
||||
border-radius: 25px; |
||||
padding: 0.8rem; |
||||
border: 0px; |
||||
background-color: var(--value8); |
||||
margin-top: 0.5rem; |
||||
} |
||||
|
||||
header a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
a#logo-link { |
||||
font-size: 2em; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
a.button { |
||||
background-color: var(--value4); |
||||
color: var(--value9); |
||||
padding: 0.8rem; |
||||
border-radius: 25px; |
||||
text-align: center; |
||||
} |
||||
|
||||
header > logo { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
header > logo buttons { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
min-width: 300px; |
||||
} |
||||
|
||||
hero { |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: var(--value1); |
||||
color: var(--value9); |
||||
padding: 2rem; |
||||
} |
||||
|
||||
a#get-started { |
||||
max-width: 150px; |
||||
} |
||||
|
||||
pitch { |
||||
display: flex; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
padding: 2rem; |
||||
height: 400px; |
||||
min-height: 400px; |
||||
width: 80vw; |
||||
min-width: 80vw; |
||||
} |
||||
|
||||
pitch > search { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
pitch > search .button { |
||||
margin-top: 0.5rem; |
||||
} |
||||
|
||||
content-creator { |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-top: 1rem; |
||||
} |
||||
|
||||
content-creator > h2 { |
||||
margin: 0px; |
||||
} |
||||
|
||||
social-proof { |
||||
display: flex; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
max-width: 80vw; |
||||
align-self: center; |
||||
} |
||||
|
||||
social-proof > h1 { |
||||
margin-bottom: 0px; |
||||
} |
||||
|
||||
social-proof > p { |
||||
font-size: 1.2em; |
||||
} |
||||
|
||||
social-proof > artists { |
||||
margin-top: 1rem; |
||||
font-size: 1.5rem; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
social-proof > artists a { |
||||
text-decoration: none; |
||||
color: var(--value4); |
||||
} |
||||
|
||||
cta { |
||||
display: flex; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
footer { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
background-color: var(--value2); |
||||
color: var(--value9); |
||||
min-height: 800px; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
<header> |
||||
<logo> |
||||
<a d="logo-link" href="/blockstart/demos/">P</a> |
||||
<buttons> |
||||
<a href="#">Log In</a> |
||||
<a class="button" href="#">Create on Patreon</a> |
||||
<a href="#">=</a> |
||||
</buttons> |
||||
</logo> |
||||
<input class="search" type="text" placeholder="Find a creator"></input> |
||||
</header> |
||||
|
||||
<hero> |
||||
<h1>Flexitarian Vice Poutine Synth</h1> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p> |
||||
<a id="get-started" class="button">Get started</a> |
||||
|
||||
<hr> |
||||
<shape style="--h: 400px"> |
||||
<h1>Video</h1> |
||||
</shape> |
||||
</hero> |
||||
|
||||
<content class="pad"> |
||||
<pitch> |
||||
<h1 class="center">Thundercats Tonx Pok Pok Pork</h1> |
||||
|
||||
<search> |
||||
<input class="search" type="text" placeholder="Find a creator"></input> |
||||
<a class="button">Search</a> |
||||
</search> |
||||
</pitch> |
||||
|
||||
|
||||
<pitch> |
||||
<h1>What's Patreon?</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> |
||||
</pitch> |
||||
|
||||
<content-creator> |
||||
<h2>Thundercats Tonx Pok Pok Pork</h2> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p> |
||||
<shape style="--h: 600px;"> |
||||
<h1>Person</h1> |
||||
</shape> |
||||
<a href="#">Person Name</a> |
||||
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p> |
||||
</content-creator> |
||||
|
||||
<content-creator> |
||||
<h2>Flexitarian Vice Poutine Synth</h2> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p> |
||||
<shape style="--h: 600px;"> |
||||
<h1>Person</h1> |
||||
</shape> |
||||
<a href="#">Person Name</a> |
||||
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p> |
||||
</content-creator> |
||||
|
||||
<content-creator> |
||||
<h2>This is another example block</h2> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p> |
||||
<shape style="--h: 600px;"> |
||||
<h1>Person</h1> |
||||
</shape> |
||||
<a href="#">Person Name</a> |
||||
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p> |
||||
</content-creator> |
||||
|
||||
<social-proof> |
||||
<h1>Who uses Patreon?</h1> |
||||
<p> |
||||
If you’re ready to take your work to the next level and willing to open your heart to your audience, Patreon is for you. |
||||
</p> |
||||
<artists> |
||||
<a href="#">Flexitarian</a> |
||||
<a href="#">Vice</a> |
||||
<a href="#">Poutine</a> |
||||
<a href="#">Synth</a> |
||||
<a href="#">Thundercats</a> |
||||
<a href="#">Tonx</a> |
||||
<a href="#">Pok</a> |
||||
<a href="#">Pok</a> |
||||
<a href="#">Pork</a> |
||||
<a href="#">Synth</a> |
||||
<a href="#">Thundercats</a> |
||||
<a href="#">Tonx</a> |
||||
<a href="#">Pok</a> |
||||
<a href="#">Pok</a> |
||||
<a href="#">Pork</a> |
||||
</artists> |
||||
|
||||
<hr> |
||||
<shape style="--h: 500px; --w: 800px;"> |
||||
<h1>People Scroller</h1> |
||||
</shape> |
||||
</social-proof> |
||||
|
||||
|
||||
<cta> |
||||
<h1>Are you ready to take back control?</h1> |
||||
<a id="get-started" class="button">Get started</a> |
||||
</cta> |
||||
</content> |
||||
|
||||
|
||||
<footer> |
||||
<left> |
||||
<h1>Footer</h1> |
||||
</left> |
||||
|
||||
<right> |
||||
<h1>Links</h1> |
||||
</right> |
||||
</footer> |
||||
</body> |
||||
</html> |
||||
@ -1,131 +0,0 @@ |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
||||
<title>Blockstart Patreon Demo</title> |
||||
|
||||
<link rel="stylesheet" href="/blockstart/blockstart.css"> |
||||
|
||||
<style> |
||||
h1 { |
||||
font-size: 3em; |
||||
} |
||||
|
||||
block { |
||||
margin-top: 2rem; |
||||
} |
||||
</style> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
<block class="pad" style="margin-top: 0px;"> |
||||
<block class="horizontal pad" style="--spacing: space-around; width: unset; margin-top: 0px;"> |
||||
<a href="/blockstart/demos/">P</a> |
||||
<div class="horizontal" style="--spacing: end;"> |
||||
<a href="#">Log In</a> |
||||
<a href="#">Create</a> |
||||
<a href="#">=</a> |
||||
</div> |
||||
</block> |
||||
<input type="text" placeholder="Find a creator"></input> |
||||
</block> |
||||
|
||||
<block class="solid pad sized" style="--value: 1; --text: 9; --h: 700px;"> |
||||
<h1>Flexitarian Vice Poutine Synth</h1> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p> |
||||
<div class="no-flex"> |
||||
<button class="pad">Get started</button> |
||||
</div> |
||||
|
||||
<hr> |
||||
<shape style="--h: 400px"> |
||||
<h1>Video</h1> |
||||
</shape> |
||||
</block> |
||||
|
||||
<content class="pad"> |
||||
<block class="center center-text pad sized" style="--pad: 2rem; --h: 400px; --w: 80vw;"> |
||||
<h1 class="center">Thundercats Tonx Pok Pok Pork</h1> |
||||
|
||||
<block> |
||||
<input class="solid" style="--value: 8" type="text" placeholder="Find a creator"></input> |
||||
<button class="solid" style="--value: 5">Search</button> |
||||
</block> |
||||
</block> |
||||
|
||||
|
||||
<block class="center center-text pad" style="--pad: 2rem;"> |
||||
<h1>What's Patreon?</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> |
||||
|
||||
<block> |
||||
<h2>Thundercats Tonx Pok Pok Pork</h2> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p> |
||||
<shape style="--h: 600px;"> |
||||
<h1>Person</h1> |
||||
</shape> |
||||
<a href="#">Person Name</a> |
||||
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p> |
||||
</block> |
||||
|
||||
<block> |
||||
<h2>Flexitarian Vice Poutine Synth</h2> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p> |
||||
<shape style="--h: 600px;"> |
||||
<h1>Person</h1> |
||||
</shape> |
||||
<a href="#">Person Name</a> |
||||
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p> |
||||
</block> |
||||
|
||||
<block> |
||||
<h2>This is another example block</h2> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p> |
||||
<shape style="--h: 600px;"> |
||||
<h1>Person</h1> |
||||
</shape> |
||||
<a href="#">Person Name</a> |
||||
<p>Quinoa intelligentsia actually, gochujang lomo art party lo-fi kickstarter.</p> |
||||
</block> |
||||
|
||||
<block class="center center-text"> |
||||
<h1>Who uses Patreon?</h1> |
||||
|
||||
<hr> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p> |
||||
<hr style="--h: 2rem;"> |
||||
<div class="no-flex" style="font-size: 1.5em;"> |
||||
<span>Flexitarian</span> |
||||
<span>Vice</span> |
||||
<span>Poutine</span> |
||||
<span>Synth</span> |
||||
<span>Thundercats</span> |
||||
<span>Tonx</span> |
||||
<span>Pok</span> |
||||
<span>Pok</span> |
||||
<span>Pork</span> |
||||
</div> |
||||
|
||||
<hr> |
||||
<shape style="--h: 500px; --w: 800px;"> |
||||
<h1>People Scroller</h1> |
||||
</shape> |
||||
</block> |
||||
|
||||
|
||||
<block class="center center-text"> |
||||
<h1>Are you ready to take back control?</h1> |
||||
<button class="no-flex">Get started</button> |
||||
</block> |
||||
</content> |
||||
|
||||
|
||||
<block class="solid center center-text sized" style="--h: 800px; --value: 2; --text: 9;"> |
||||
<h1>Footer</h1> |
||||
</block> |
||||
</body> |
||||
</html> |
||||
@ -1,153 +0,0 @@ |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
||||
<title>Blockstart Slack Demo</title> |
||||
|
||||
<link rel="stylesheet" href="/blockstart/blockstart.css"> |
||||
|
||||
<style> |
||||
</style> |
||||
</head> |
||||
|
||||
<body class="solid" style="--value: 8"> |
||||
<block class="horizontal pad solid" style="--value: 2; --spacing: space-around; width: unset; --text: 9"> |
||||
<a href="/blockstart/demos/">SLACK</a> |
||||
<div class="horizontal" style="--spacing: end;"> |
||||
<a href="#">Q</a> |
||||
<a href="#">=</a> |
||||
</div> |
||||
</block> |
||||
|
||||
<block class="solid pad" style="--value: 2; --text: 9; --pad: 3rem;"> |
||||
<h1>Flexitarian Vice Poutine Synth</h1> |
||||
<p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac..</p> |
||||
<button style="--text: 0">Sign up with email</button> |
||||
<button style="--text: 0">Sign up with google</button> |
||||
|
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p> |
||||
<hr> |
||||
<shape style="--w: 700px; --h: 400px;"> |
||||
<h1>Phone Demo</h1> |
||||
</shape> |
||||
</block> |
||||
|
||||
<block class="pad center center-text" style="--pad: 2rem;"> |
||||
<h4>TRUSTED BY COMPANIES ALL OVER THE WORLD</h4> |
||||
<hr> |
||||
<div style="font-size: 1.5em;">Flexitarian Vice Poutine Synth Flexitarian Vice Poutine Synth</div> |
||||
</block> |
||||
|
||||
<block class="horizontal" style="--spacing: start"> |
||||
<shape style="--h: 800px; --w: 400px;"> |
||||
<h1>People Dancing For Work</h1> |
||||
</shape> |
||||
</block> |
||||
|
||||
<block> |
||||
<h2>Thundercats Tonx Pok Pok Pork</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> |
||||
<a href="#">Link to stuff.</a> |
||||
</block> |
||||
|
||||
<hr> |
||||
<block class="horizontal" style="--spacing: end"> |
||||
<shape style="--h: 800px; --w: 400px;"> |
||||
<h1>People Dancing For Work</h1> |
||||
</shape> |
||||
</block> |
||||
|
||||
<block> |
||||
<h2>Thundercats Tonx Pok Pok Pork</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> |
||||
<a href="#">Link to stuff.</a> |
||||
</block> |
||||
|
||||
<hr> |
||||
<block class="horizontal" style="--spacing: start"> |
||||
<shape style="--h: 800px; --w: 400px;"> |
||||
<h1>People Dancing For Work</h1> |
||||
</shape> |
||||
</block> |
||||
|
||||
<block> |
||||
<h2>Thundercats Tonx Pok Pok Pork</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> |
||||
<a href="#">Link to stuff.</a> |
||||
</block> |
||||
|
||||
|
||||
<hr> |
||||
<block class="center solid sized" style="--value: 9; --w: 100%;"> |
||||
|
||||
<block class="center-self sized center-text pad" style="--w: 80%;"> |
||||
<h1>Thundercats Tonx Pok Pok Pork</h1> |
||||
<p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p> |
||||
<button class="pad">MEET SLACK FOR ENTERPRISE</button> |
||||
<button class="pad">TALK TO SALES</button> |
||||
</block> |
||||
|
||||
<grid class="center-self sized" style="--cols: 1fr 1fr 1fr; --w: 80%;"> |
||||
<block> |
||||
<h1>75%</h1> |
||||
<span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span> |
||||
</block> |
||||
<block> |
||||
<h1>84%</h1> |
||||
<span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span> |
||||
</block> |
||||
<block> |
||||
<h1>91%</h1> |
||||
<span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span> |
||||
</block> |
||||
</grid> |
||||
</block> |
||||
|
||||
<shape style="--h: 400px"> |
||||
<h1>Video</h1> |
||||
</shape> |
||||
|
||||
<block class="solid pad" style="--value: 9"> |
||||
<blockquote> |
||||
"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." -- <b>Quote Person</b> |
||||
</blockquote> |
||||
</block> |
||||
|
||||
<hr> |
||||
<grid style="--cols: 1fr 1fr 1fr 1fr; --gap: 1rem;"> |
||||
<shape style="--w: 200px; --h: 400px;"> |
||||
<h1>Card</h1> |
||||
</shape> |
||||
<shape style="--w: 200px; --h: 400px;"> |
||||
<h1>Card</h1> |
||||
</shape> |
||||
<shape style="--w: 200px; --h: 400px;"> |
||||
<h1>Card</h1> |
||||
</shape> |
||||
<shape style="--w: 200px; --h: 400px;"> |
||||
<h1>Card</h1> |
||||
</shape> |
||||
</grid> |
||||
|
||||
<hr> |
||||
<block class="solid center sized" style="--value: 2; --text: 9; --w: 100%"> |
||||
<block class="sized center-self center-text" style="--w: 80%"> |
||||
<h1>Welcome to your new digital HQ</h1> |
||||
|
||||
<button class="pad" style="--text: 0;">TRY FOR FREE</button> |
||||
<button class="pad" style="--text: 0;">TALK TO SALES</button> |
||||
</block> |
||||
</block> |
||||
|
||||
<hr> |
||||
<block class="sized solid" style="--value: 9; --h: 700px;"> |
||||
<h1>Footer</h1> |
||||
</block> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -1,29 +0,0 @@ |
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
||||
<title>Blockstart Template</title> |
||||
|
||||
<link rel="stylesheet" href="/blockstart/blockstart.css"> |
||||
|
||||
<style> |
||||
</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> | |
||||
<a href="/blockstart/#docs">Docs</a> | |
||||
<a href="/blockstart/demos/">Demos</a> | |
||||
<a href="/blockstart/blockstart.css">Download</a> |
||||
</div> |
||||
</block> |
||||
|
||||
<h1>Coming soon...</h1> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue