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

Stage 2 demo using patreon.

Browse Source
master
Zed A. Shaw 3 years ago
parent 391427df29
commit 449d72b756
1 changed files with 273 additions and 0 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. 273
      public/blockstart/demos/patreon-2.html

273
public/blockstart/demos/patreon-2.html
Unescape View File

@ -0,0 +1,273 @@
<!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>
Write Preview
Loading…
Cancel
Save