parent
391427df29
commit
449d72b756
@ -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> |
||||
Loading…
Reference in new issue