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.
 
 
blockstart/public/demos/asana.html

111 lines
3.4 KiB

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blockstart Demo Asana</title>
<link rel="stylesheet" href="/blockstart.css">
<style>
</style>
</head>
<body>
<block class="horizontal pad" style="width: unset">
<span>asana</span>
<span class="no-flex">G | M U <button>Get Started</button></span>
</block>
<block class="solid center center-text sized" style="--value: 8; --h: 400px;">
<div class="no-flex">
<h1>Bring products to market faster with Asana</h1>
<p>Asana is the easiest way for product managers to track their team's work—and get results.</p>
</div>
<button class="no-flex" style="width: unset">Get Started</button>
</block>
<hr>
<block class="center center-text" style="max-width: 80vw">
<h1>Asana is the easiest way for product teams to...</h1>
<hr>
<block class="center center-text">
<shape style="--w: 25px; --h: 25px;"></shape>
<p>Plan product roadmaps</p>
<p>Use Asana as a source of truth to set goals, align on priorities, and track product milestones.</p>
</block>
<hr>
<block class="center center-text">
<shape style="--w: 25px; --h: 25px;"></shape>
<p>Plan product roadmaps</p>
<p>Use Asana as a source of truth to set goals, align on priorities, and track product milestones.</p>
</block>
<hr>
<block class="center center-text">
<shape style="--w: 25px; --h: 25px;"></shape>
<p>Plan product roadmaps</p>
<p>Use Asana as a source of truth to set goals, align on priorities, and track product milestones.</p>
</block>
<hr>
<button class="center" style="max-width: 220px;">More ways to Asana</button>
</block>
<hr>
<block class="center" style="max-width: 580px;">
<shape style="--w: 580px; --h: 380px">
<h1>Screenshot</h1>
</shape>
<block>
<h4>Move fast without breaking things</h4>
<p>Using Asana as your product roadmap tool helps you track project progress, identify blockers, and shift resources on the fly.</p>
<button style="max-width: 220px;">Learn more about Asana</button>
</block>
</block>
<hr>
<block class="center center-text" style="max-width: 80vw;">
<h4>Product team use cases</h4>
<select class="no-flex" style="min-width: 300px; margin: 1rem;"><option>Product roadmaps</option></select>
<shape style="--w: 580px; --h: 380px">
<h1>Screenshot</h1>
</shape>
<p>Typewriter seitan selvage stumptown jean shorts. Messenger bag art party lo-fi, readymade vaporware drinking vinegar lomo pour-over fanny pack DIY kogi whatever.</p>
</block>
<hr>
<shape style="--w: 681px; --h: 384px;" >
<h1>Video</h1>
</shape>
<hr>
<block class="center solid sized" style="--value: 8; --h: 500px; --w: 100vw;">
<div class="no-flex">
<h1>Product Quotes</h1>
<blockquote>"Some dude says that some dude is great."</blockquote>
</div>
</block>
<hr>
<block class="center center-text">
<h1>Ship product faster with Asana today</h1>
<p style="margin-top: 1rem; margin-bottom: 1rem;">See why millions of people use asana...</p>
<button class="no-flex" style="max-width: 220px">Get started</button>
</block>
<hr>
<block class="sized solid" style="--h: 500px; --value: 0; color: var(--value9);">
<h1>Footer</h1>
</block>
</body>
</html>