A simple CSS file to make it easier to layout a web page quickly at the start. It's meant to be removed once you have the basic layout done, but you could probably keep it if you like it.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
blockstart/public/demos/canva.html

158 lines
5.9 KiB

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blockstart Demo Canva</title>
<link rel="stylesheet" href="/blockstart.css">
<style>
</style>
</head>
<body>
<block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
<div>Canva</div>
<input type="text">
<span>?</span>
<button>Log In</button>
<button>Sign Up</button>
</block>
<block class="center-text sized center" style="--w: 80vw; --h: 400px; padding-top: 2rem; padding-bottom: 2rem">
<h1>Canva. Design for everyone.</h1>
<p>Iceland bespoke polaroid pug raclette kinfolk tumblr lo-fi asymmetrical chillwave church-key. Bespoke sustainable +1 cred, heirloom chicharrones kitsch tousled. Mixtape schlitz air plant iceland hot chicken, bicycle rights poutine austin bespoke. Stumptown schlitz keytar meggings taiyaki vice next level ugh. Fam vaporware cliche jean shorts listicle narwhal gluten-free vape. Af godard health goth, iPhone edison bulb shaman you probably haven't heard of them mustache photo booth etsy gochujang subway tile cronut. Helvetica ugh seitan, semiotics before they sold out hella hot chicken gastropub try-hard.</p>
<block class="horizontal center" style="max-width: 50vw; max-height: min-content;">
<button class="no-flex">Start your free Pro trial</button>
<button class="no-flex">Get Canva Free</button>
</block>
</block>
<hr/>
<block>
<block class="solid sized center" style="--value: 3; --w: 450px; --h: 300px">
<h1>Demo Image</h1>
</block>
</block>
<hr/>
<grid class="center" style="max-width: 80vw; --cols: 1fr 1fr; --gap: 1rem;">
<shape style="--w: 250px; --h: 150px"></shape>
<div>Letterpress leggings bitters drinking vinegar asymmetrical godard slow-carb tumeric.</div>
<div>Tote bag bespoke whatever, godard stumptown hammock selvage hot chicken vinyl 3 wolf moon asymmetrical roof party farm-to-table. </div>
<shape style="--w: 250px; --h: 150px"></shape>
<shape style="--w: 250px; --h: 150px"></shape>
<div>Fixie wayfarers fingerstache drinking vinegar, marfa flannel art party cray pour-over coloring book.</div>
</grid>
<hr/>
<block class="center-text">
<h1>Templates</h1>
<grid class="center" style="--cols: 1fr 1fr 1fr;">
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
<shape style="--w: 150px; --h: 150px"></shape>
</grid>
</block>
<hr/>
<block class="center sized" style="--w: 80vw;">
<block class="center center-text sized" style="--w: 80%">
<h1>Work solo, or as a team</h1>
<p>Letterpress leggings bitters drinking vinegar asymmetrical godard slow-carb tumeric.</p>
</block>
<hr/>
<block class="horizontal">
<left class="sized" style="--w: 50%">
<p>Team folders to help you stay organized, store brand assets, and manage content</p>
<p>Plan, create, schedule and publish your social media posts directly from Canva</p>
<p>Real-time collaboration across countries, companies, and departments</p>
<p>Built-in comments to communicate, work, and resolve suggestions in real-time</p>
</left>
<right class="center">
<shape style="--w: 150px; --h: 150px;"></shape>
</right>
</block>
<button class="center sized" style="--w: 150px">See work solutions</button>
</block>
<hr/>
<block class="center center-text sized" style="--w: 80vw">
<h1>A perfect fit for every team</h1>
<hr/>
<grid style="--cols: 1fr 1fr 1fr">
<block>
<h4>Canva Free</h4>
<p>Bitters DIY semiotics, banjo tilde fingerstache church-key woke pitchfork yr pickled tattooed yuccie. vetica vegan, chartreuse intelligentsia affogato craft beer poutine viral health got</p>
<hr>
<button class="no-flex">Get Canva Free</button>
</block>
<block>
<h4>Canva Pro</h4>
<p>vetica vegan, chartreuse intelligentsia affogato craft beer poutine viral health got meggings poke keffiyeh chambray forage swag bicycle rights.</p>
<hr>
<button class="no-flex">Get Canva Free</button>
</block>
<block>
<h4>Canva Enterprise</h4>
<p>Bitters DIY semiotics, banjo tilde fingerstache church-key woke pitchfork yr pickled tattooed yuccie.</p>
<hr>
<button class="no-flex">Get Canva Free</button>
</block>
</grid>
</block>
<hr/>
<block class="center" style="max-width: 90vw;">
<h1 style="text-align: center;">Loved by people and businesses around the world</h1>
<block class="horizontal">
<block>
<shape style="--w: 250px; --h: 150px;"></shape>
<span>Ennui af cred, raw denim lo-fi +1 meggings poke keffiyeh chambray forage swag bicycle rights.</span>
</block>
<block>
<shape style="--w: 250px; --h: 150px;"></shape>
<span>Bitters DIY semiotics, banjo tilde fingerstache church-key woke pitchfork yr pickled tattooed yuccie.</span>
</block>
<block>
<shape style="--w: 250px; --h: 150px;"></shape>
<span>Microdosing aesthetic poke helvetica vegan, chartreuse intelligentsia affogato craft beer poutine viral health goth.</span>
</block>
</block>
</block>
<hr/>
<block class="sized" style="--h: 400px; border-top: 1px solid var(--value5); --text: 9;">
<h1>Footer</h1>
</block>
</body>
</html>