<!DOCTYPE html> <html> <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>