From 716ec49e262bfed3e52b7152e1484fa65f18624e Mon Sep 17 00:00:00 2001
From: "Zed A. Shaw" <zed.shaw@gmail.com>
Date: Tue, 28 Jun 2022 20:35:43 -0400
Subject: [PATCH] Vimeo demo.

---
 public/blockstart/demos/vimeo.html | 102 +++++++++++++++++++++++++++--
 1 file changed, 95 insertions(+), 7 deletions(-)
diff --git a/public/blockstart/demos/vimeo.html b/public/blockstart/demos/vimeo.html
index 2db28ac..4b80aef 100644
--- a/public/blockstart/demos/vimeo.html
+++ b/public/blockstart/demos/vimeo.html
@@ -14,16 +14,104 @@
 </head>
 
 <body>
-  <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
-    <a href="/blockstart/">blockstart.css</a>
+  <block class="solid horizontal pad" style="--value: 0; --text: 9; --spacing: space-around; width: unset;">
+    <a href="/blockstart/">vimeo</a>
     <div class="horizontal" style="--spacing: end;">
-      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
-      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
-      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
-      <a href="/blockstart/blockstart.css">Download</a>
+      <button>New video</button>
     </div>
   </block>
 
-<h1>Coming soon...</h1>
+  <block class="center-text solid pad" style="--value: 0; --text: 9;">
+    <h1>Scrolling thing</h1>
+    <h1>With Vimeo</h1>
+
+    <block class="center horizontal sized" style="--w: 60vw; --text: 0">
+      <button>See plans</button>
+      <button>Join for free</button>
+    </block>
+  </block>
+
+  <block class="pad">
+    <shape style="--w: 450px; --h: 500px">
+      <h1>Scroll Sample</h1>
+    </shape>
+  </block>
+
+  <block class="pad">
+    <p>Tofu single-origin coffee cray offal gastropub hoodie edison bulb fam flannel pug tumblr celiac.</p>
+
+    <p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
+  </block>
+
+  <block class="pad solid" style="--pad: 2rem; --value: 0; --text: 9;">
+    <shape class="border" style="--value: 9; --text: 0; --h: 400px; --w: 300px;">
+      <h1>Video Marketing</h1>
+    </shape>
+    <shape class="border" style="--value: 9; --text: 0; --h: 400px; --w: 300px;">
+      <h1>Video Marketing</h1>
+    </shape>
+    <shape class="border" style="--value: 9; --text: 0; --h: 400px; --w: 300px;">
+      <h1>Video Marketing</h1>
+    </shape>
+  </block>
+
+  <block class="sized center pad" style="--w: 80vw;">
+    <block class="center-text">
+      <h4>INTEGRATIONS</h4>
+      <p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
+    </block>
+
+    <grid class="center sized pad" style="--cols: 1fr 1fr; --pad: 2rem">
+      <block class="center-text pad">
+        <h1>Company</h1>
+      </block>
+      <block class="center-text pad">
+        <h1>Company</h1>
+      </block>
+      <block class="center-text pad">
+        <h1>Company</h1>
+      </block>
+      <block class="center-text pad">
+        <h1>Company</h1>
+      </block>
+      <block class="center-text pad">
+        <h1>Company</h1>
+      </block>
+      <block class="center-text pad">
+        <h1>Company</h1>
+      </block>
+      <block class="center-text pad">
+        <h1>Company</h1>
+      </block>
+      <block class="center-text pad">
+        <h1>Company</h1>
+      </block>
+      <block class="center-text pad" style="grid-column: 1 / span 2">
+        <h1>Company</h1>
+      </block>
+    </grid>
+  </block>
+
+  <block class="pad solid center-text" style="--value: 0; --text: 9; --pad: 2rem;">
+    <h1>Flexitarian Vice Poutine Synth</h1>
+    <hr>
+
+    <shape style="--h: 400px; --value: 5;">
+      <h1>Scroller</h1>
+    </shape>
+
+    <hr>
+
+    <h1>Ready to unlock the power of video?</h1>
+
+    <block class="center" style="--text: 0;">
+      <button>See plans</button>
+      <button>Join for free</button>
+    </block>
+  </block>
+
+  <block class="solid sized center" style="--value: 7; --h: 600px;">
+    <h1>Footer</h1>
+  </block>
 </body>
 </html>
