diff --git a/floppies/karina/noweb/index.html b/floppies/karina/noweb/index.html
index ba4ae6c..f37a5be 100644
--- a/floppies/karina/noweb/index.html
+++ b/floppies/karina/noweb/index.html
@@ -1,66 +1,116 @@
+<!DOCTYPE html>
 <html>
-  <head>
-    <title></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-
-    <style>
-
-      body {
-      margin-left: 20;
-      margin-right: 20;
-      padding: 0;
-      color: grey;
-      }
-
-      form.buttons {
-
-      }
-
-      form.buttons input {
-      width: 150px;
-      height: 150px;
-      /*hide the labels*/
-      font-size: 0;
-      line-height: 0;
-      border: 0;
-      margin: ;
-      }
-    </style>
-
-  </head>
-  <body>
-
-    <form action="cgi-bin/play.cgi" class="buttons">
-      <input type="submit" name="p" value="BasicTurn.mp3" style="background:url(images/choreology1-BasicTurn.svg) no-repeat;" />
-      <input type="submit" name="p" value="Follow.mp3" style="background:url(images/choreology2-Follow.svg) no-repeat;" />
-      <br>
-      <input type="submit" name="p" value="AmericanSpin.mp3" style="background:url(images/choreology3-AmericanSpin.svg) no-repeat;" />
-      <input type="submit" name="p" value="Bump.mp3" style="background:url(images/choreology4-Bump.svg) no-repeat;" />
-      <br>
-      <input type="submit" name="p" value="StopAndGo.mp3" style="background:url(images/choreology5-StopAndGo.svg) no-repeat;" />
-      <input type="submit" name="p" value="Windmill.mp3" style="background:url(images/choreology6-Windmill.svg) no-repeat;" />
-      <br>
-      <input type="submit" name="p" value="SpanishArms.mp3" style="background:url(images/choreology7-SpanishArms.svg) no-repeat;" />
-      <input type="submit" name="p" value="Hucklebuck.mp3" style="background:url(images/choreology8-Hucklebuck.svg) no-repeat;" />
-      <br>
-      <!--"Whip" of "The Whip" options - needs testing with music playing in the background
-	  <input type="submit" name="p" value="TheWhip.mp3" style="background:url(images/choreology9-Whip.svg) no-repeat;" />
-	  -->
-      <input type="submit" name="p" value="Whip.mp3" style="background:url(images/choreology9-Whip.svg) no-repeat;" />
-      <input type="submit" name="p" value="ChickenWalks.mp3" style="background:url(images/choreology10-ChickenWalks.svg) no-repeat;" />
-      <div class="tempo">
-	<br>
-	<br>
-	<br>
-	<input id="slider3" type="range" min ="100" max="180" step ="1" style="width: 640px" />
-	<!-- <input id="slider3" type="range" min ="100" max="180" step ="1" orient="vertical" style="-webkit-appearance: slider-vertical; writing-mode: bt-lr" /> 
-	  -->
-      </div>
-
-    </form>
-
-
-  </body>
+
+<head>
+  <title> Rock Step - Triple Step - Triple Step </title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+
+<style>
+
+body {
+  margin-left: 20;
+  margin-right: 20;
+  padding: 0;
+}
+
+h1 {
+  font-family: sans-serif, Avenir, 'Poiret One' ;
+  font: 8px;
+  /* font size and typeface not working */
+  text-align: center;
+  text-transform: capitalize;
+  color: rgb(61, 61, 92);
+}
+
+.responsive {
+    padding: 0px;
+    float: left;
+    width: 12.5%;
+}
+
+@media only screen and (max-width: 700px){
+    .responsive {
+        width: 24.99999%;
+        margin: 6px 0;
+    }
+}
+
+@media only screen and (max-width: 320px){
+    .responsive {
+        width: 50%;
+    }
+}
+
+
+form.buttons {
+
+}
+
+form.buttons input {
+  width: 150px;
+  height: 150px;
+  /*hide the labels*/
+  font-size: 0; 
+  line-height: 0;
+  border: 0;
+  margin: ;
+}
+</style>
+</head>
+
+<body>
+<!--
+/* For devices smaller than 400px: */
+body {
+    background-image: url('img_smallflower.jpg'); 
+}
+
+/* For devices 400px and larger: */
+@media only screen and (min-device-width: 400px) {
+    body { 
+        background-image: url('img_flowers.jpg'); 
+    }
+}
+-->
+
+<h1> rock step - triple step - triple step </h1>
+<br>
+<br>
+<form action="cgi-bin/play.cgi" class="buttons">
+  <input type="submit" name="p" value="BasicTurn.mp3" style="background:url(images/choreology1-BasicTurn.svg) no-repeat;" />
+  <input type="submit" name="p" value="Follow.mp3" style="background:url(images/choreology2-Follow.svg) no-repeat;" />
+
+  <input type="submit" name="p" value="AmericanSpin.mp3" style="background:url(images/choreology3-AmericanSpin.svg) no-repeat;" />
+  <input type="submit" name="p" value="Bump.mp3" style="background:url(images/choreology4-Bump.svg) no-repeat;" />
+
+  <input type="submit" name="p" value="StopAndGo.mp3" style="background:url(images/choreology5-StopAndGo.svg) no-repeat;" />
+  <input type="submit" name="p" value="Windmill.mp3" style="background:url(images/choreology6-Windmill.svg) no-repeat;" />
+
+  <input type="submit" name="p" value="SpanishArms.mp3" style="background:url(images/choreology7-SpanishArms.svg) no-repeat;" />
+  <input type="submit" name="p" value="Hucklebuck.mp3" style="background:url(images/choreology8-Hucklebuck.svg) no-repeat;" />
+
+<!--  "Whip" of "The Whip" options - needs testing with music playing in the background
+  <input type="submit" name="p" value="TheWhip.mp3" style="background:url(images/choreology9-Whip.svg) no-repeat;" />
+--> 
+  <input type="submit" name="p" value="Whip.mp3" style="background:url(images/choreology9-Whip.svg) no-repeat;" />
+  <input type="submit" name="p" value="ChickenWalks.mp3" style="background:url(images/choreology10-ChickenWalks.svg) no-repeat;" />
+  <div class="tempo">
+  <br>
+  <br>
+  <br>
+<!--  no slider for the launch day
+    <input id="slider3" type="range" min ="100" max="180" step ="1" style="width: 640px" /> 
+
+    <input id="slider3" type="range" min ="100" max="180" step ="1" orient="vertical" style="-webkit-appearance: slider-vertical; writing-mode: bt-lr" /> 
+ -->  
+  </div>
+
+</form>
+
+
+</body>
+
 </html>
 
 
@@ -68,3 +118,11 @@
 
 
 
+
+
+
+
+
+
+
+
