<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Blockstart Test</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>