diff --git a/feature-flow.css b/feature-flow.css
new file mode 100644
index 0000000..874f006
--- /dev/null
+++ b/feature-flow.css
@@ -0,0 +1,63 @@
+main {
+ height: 100vh;
+}
+
+ul {
+ list-style: none;
+ padding: 0;
+}
+
+main > ul {
+ display: flex;
+ flex: 1;
+ gap: 1rem;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ margin: 0 1rem;
+ border: 3px solid var(--background-color);
+}
+
+li {
+ flex: 1;
+ height: 100%;
+ margin: 0;
+ color: var(--background-color);
+}
+
+main > ul > li:first-child {
+ margin-left: 1rem;
+}
+
+main > ul > li:last-child {
+ margin-right: 1rem;
+}
+
+main > ul > li:not(:last-child) {
+ padding-right: 1rem;
+ border-right: 3px solid var(--background-color);
+ border-radius: 0;
+}
+
+header {
+ padding: 0.5rem;
+ border: solid 2px var(--background-color);
+ margin-top: 1rem;
+}
+
+section {
+ margin: 1rem 0;
+}
+
+section ul {
+ padding: 1rem;
+}
+
+h5 {
+ margin-bottom: 0;
+}
+
+.blue-bucket {
+ margin-top: 1rem;
+ border: 3px solid var(--background-color);
+ height: 60px;
+}
diff --git a/feature-flow.html b/feature-flow.html
new file mode 100644
index 0000000..0fd24bf
--- /dev/null
+++ b/feature-flow.html
@@ -0,0 +1,99 @@
+
+
+
+
+
+ Interactive Feature flow
+
+
+
+
+
+
+
+ -
+
+
+
doing
+
+ - Feature 1
+ - Feature 2
+
+
+
+ done
+
+ - Feature 3
+ - Feature 4
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+
+
+
+