Very hacky solution that works

vikneshwar · May 31, 2016 · e370b9c · e370b9c
1 parent 1076e08
commit e370b9c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -78,14 +78,14 @@
                     <div class="toasty" id="toast">
                         Welcome to ChromaGen!
                     </div>
-                    <p>
+
                       <div class="dabba">
-                        <button id="c0" class="circle" onclick="changeColour(0)"></button>
-                        <button id="c1" class="circle" onclick="changeColour(1)"></button>
-                        <button id="c2" class="circle" onclick="changeColour(2)"></button>
-                        <button id="c3" class="circle" onclick="changeColour(3)"></button>
-                        <button id="c4" class="circle" onclick="changeColour(4)"></button>
-                        <button id="c5" class="circle" onclick="changeColour(5)"></button>
+                                  <br>  <button id="c0" class="circle" onclick="changeColour(0)"></button>
+                                  <br>  <button id="c1" class="circle" onclick="changeColour(1)"></button>
+                                  <br>  <button id="c2" class="circle" onclick="changeColour(2)"></button>
+                                  <br>  <button id="c3" class="circle" onclick="changeColour(3)"></button>
+                                  <br>  <button id="c4" class="circle" onclick="changeColour(4)"></button>
+                                  <br>  <button id="c5" class="circle" onclick="changeColour(5)"></button>
                       </div>
 
         </center>

diff --git a/style.css b/style.css
@@ -16,9 +16,9 @@ body{
 	margin: 4px;
 	border-radius: 32px;
 	display: inline-block;
-	-webkit-transition-duration: 0.2s;
-	-moz-transition-duration: 0.2s;
-	transition-duration: 0.2s;
+	-webkit-transition-duration: 0.2s linear;
+	-moz-transition-duration: 0.2s linear;
+	transition-duration: 0.2s linear;
 }
 
 .circle:active{
@@ -55,7 +55,6 @@ transition-duration: 0.2s;
 .box{
 	padding: 30px;
 	max-width: 360px;
-	height: 300px;
 	margin: auto;
 	vertical-align: middle;
 	background: #fff;
@@ -89,9 +88,10 @@ button:active{
 }
 
 .dabba{
-	position:static;
-	vertical-align: middle;
-	height: 60px;
+vertical-align: middle;
+-ms-transform: rotate(270deg); /* IE 9 */
+-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
+transform: rotate(270deg);
 }
 
 .header{