HTML and CSS changes for reset button and score #3

Merged
merged 1 commit into from May 12, 2012
View
@@ -12,12 +12,14 @@
<h1>code machine</h1>
+ <p class="score">Score: <span id="counter">0</span></p>
+
<ul class="machine">
<li>
<ul class="roller">
- <li>1</li>
- <li>2</li>
- <li>3</li>
+ <li>?</li>
+ <li>?</li>
+ <li>?</li>
<li>4</li>
<li>5</li>
<li>6</li>
@@ -29,9 +31,9 @@
</li>
<li>
<ul class="roller">
- <li>1</li>
- <li>2</li>
- <li>3</li>
+ <li>?</li>
+ <li>?</li>
+ <li>?</li>
<li>4</li>
<li>5</li>
<li>6</li>
@@ -43,9 +45,9 @@
</li>
<li>
<ul class="roller">
- <li>1</li>
- <li>2</li>
- <li>3</li>
+ <li>?</li>
+ <li>?</li>
+ <li>?</li>
<li>4</li>
<li>5</li>
<li>6</li>
@@ -59,8 +61,9 @@
<div class="answers">
<a href="#start" class="button" id="start">Start</a>
+ <a href="#reset" class="button" id="reset">Reset</a>
- <a href="" id="more-info">Find out more on MDN!</a>
+ <a href="" class="more-info">Find out more on MDN!</a>
</div>
View
@@ -46,8 +46,13 @@ h1 {
text-align: center;
text-shadow: 3px 3px 0 #666;
}
-a#start {
- background: green;
+.score {
+ color: #fff;
+ font-size: 2em;
+ margin: 0 30px;
+ text-align: right;
+}
+.button {
border: solid 1px rgba(0, 0, 0, 0.6);
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 4px rgba(255, 255, 255, 0.6), inset 0 25px 0 rgba(255, 255, 255, 0.1);
@@ -60,6 +65,9 @@ a#start {
text-shadow: rgba(0, 0, 0, 0.7);
width: 200px;
}
+a#start {
+ background: green;
+}
a#start:hover {
background: lime;
color: #000;
@@ -73,6 +81,22 @@ a#start.disabled:hover {
background: #666;
color: #888;
}
+a#reset {
+ background: maroon;
+}
+a#reset:hover {
+ background: red;
+ color: #000;
+ text-decoration: none;
+}
+a#reset.disabled {
+ background: #666;
+ color: #888;
+}
+a#reset.disabled:hover {
+ background: #666;
+ color: #888;
+}
.machine {
list-style-type: none;
margin: 50px 0 50px 30px;
@@ -140,10 +164,10 @@ a#start.disabled:hover {
text-shadow: 2px 2px 0 #fff;
width: auto;
}
-.answers a {
+.more-info {
display: block;
margin: 0 auto;
}
-.answers a:hover {
+.more-info:hover {
text-decoration: underline;
}
View
@@ -45,8 +45,14 @@ h1 {
text-shadow:3px 3px 0 #666;
}
-a#start {
- background:green;
+.score {
+ color:#fff;
+ font-size:2em;
+ margin:0 30px;
+ text-align:right;
+}
+
+.button {
border:solid 1px rgba(0,0,0,0.6);
border-radius:4px;
box-shadow:0 0 0 1px rgba(255,255,255,0.6), 0 0 4px rgba(255,255,255,0.6), inset 0 25px 0 rgba(255,255,255,0.1);
@@ -57,7 +63,11 @@ a#start {
padding:12px 0;
text-align:center;
text-shadow:rgba(0,0,0,0.7);
- width:200px;
+ width:200px;
+}
+
+a#start {
+ background:green;
&:hover {
background:lime;
@@ -76,6 +86,26 @@ a#start {
}
}
+
+a#reset {
+ background:maroon;
+
+ &:hover {
+ background:red;
+ color:#000;
+ text-decoration:none;
+ }
+
+ &.disabled {
+ background:#666;
+ color:#888;
+
+ &:hover {
+ background:#666;
+ color:#888;
+ }
+ }
+}
.machine {
list-style-type:none;
margin:50px 0 50px 30px;
@@ -155,7 +185,7 @@ a#start {
}
-.answers a {
+.more-info {
display:block;
margin:0 auto;