Make the footer more like the target's.

public/blockstart/demos/breadcrumbs-2.html

@@ -96,12 +96,6 @@ content {
   padding: 1rem;
 }
 
-footer {
-  min-height: 600px;
-  color: var(--value9);
-  background-color: var(--value2);
-  text-align: center;
-}
 
 companies {
   display: flex;
@@ -128,6 +122,24 @@ a#logo {
   font-size: 1.2em;
   font-weight: 600;
 }
+
+footer {
+  display: flex;
+  min-height: 400px;
+  color: var(--value9);
+  background-color: var(--value2);
+  padding: 1rem;
+}
+
+footer > column {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+footer > column h5 {
+  margin: 0px;
+}
 </style>
 </head>
 
@@ -256,7 +268,53 @@ a#logo {
   </contact-scoring>
 
   <footer>
-    <h1>Footer</h1>
+    <column>
+      <a id="logo" style="color: var(--value9);" href="/blockstart/demos/">Breadcrumbs</a>
+
+      <p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
+
+      <span>follow us links</span>
+    </column>
+
+    <column>
+      <h5>COMPANY</h5>
+
+      <ol>
+        <li>link</li>
+        <li>link</li>
+        <li>link</li>
+        <li>link</li>
+        <li>link</li>
+        <li>link</li>
+      </ol>
+    </column>
+
+    <column>
+      <h5>RESOURCES</h5>
+
+      <ol>
+        <li>link</li>
+        <li>link</li>
+        <li>link</li>
+        <li>link</li>
+        <li>link</li>
+        <li>link</li>
+      </ol>
+
+    </column>
+
+    <column>
+      <h5>RECENT POSTS</h5>
+
+      <ol>
+        <li>Flexitarian Vice Poutine Synth</li>
+        <li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
+        <li>Thundercats Tonx Pok Pok Pork</li>
+        <li>Flexitarian Vice Poutine Synth</li>
+        <li>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</li>
+      </ol>
+
+    </column>
   </footer>
 </body>
 </html>