Adding the cascade task

rachelandrew · rachelandrew · commit 32114ae6d7b2 · 2019-07-17T13:08:03.000+01:00
This was inline in the page so adding it for consistency.
diff --git a/learn/cascade/task.html b/learn/cascade/task.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>The Cascade Task</title>
+    <link rel="stylesheet" href="../styles.css">
+    <style>
+        
+    </style>
+
+    <style class="editable">
+    #outer div ul .nav a {
+      background-color: blue;
+      padding: 5px;
+      display: inline-block;
+      margin-bottom: 10px;
+    }
+
+    div div li a {
+      color: yellow;
+    }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+      <div id="outer" class="container">
+        <div id="inner" class="container">
+          <ul>
+            <li class="nav"><a href="#">One</a></li>
+            <li class="nav"><a href="#">Two</a></li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 250px;">
+#outer div ul .nav a {
+  background-color: blue;
+  padding: 5px;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+div div li a {
+  color: yellow;
+}               
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 170px;">
+<div id="outer" class="container">
+  <div id="inner" class="container">
+    <ul>
+      <li class="nav"><a href="#">One</a></li>
+      <li class="nav"><a href="#">Two</a></li>
+    </ul>
+  </div>
+</div>
+    </textarea>
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../playable.js"></script>
+
+</html>
