diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..62aff3f3cf 100644
--- a/01 - JavaScript Drum Kit/index-START.html
+++ b/01 - JavaScript Drum Kit/index-START.html
@@ -58,7 +58,23 @@
diff --git a/02 - JS + CSS Clock/images/clock-face.jpg b/02 - JS + CSS Clock/images/clock-face.jpg
new file mode 100644
index 0000000000..e8abf21492
Binary files /dev/null and b/02 - JS + CSS Clock/images/clock-face.jpg differ
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..3ad5e607be 100644
--- a/02 - JS + CSS Clock/index-START.html
+++ b/02 - JS + CSS Clock/index-START.html
@@ -6,6 +6,9 @@
+
@@ -27,14 +30,20 @@
body {
font-size: 2rem;
- display:flex;
- flex:1;
min-height: 100vh;
+ /*display:flex;*/
+ /*flex: 1;*/
align-items: center;
}
+ .main-header {
+ min-height: 10vh;
+ align-items: center;
+ margin-top: 8%;
+ }
+
.clock {
- width: 30rem;
+ width: 0rem;
height: 30rem;
border:20px solid white;
border-radius:50%;
@@ -46,6 +55,15 @@
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
+ background-image: url("images/clock-face.jpg");
+ background-size: cover;
+ border: 5px solid black;
+ -webkit-transition: width 2s; /* Safari */
+ transition: width 2s;
+ }
+
+ .clock:hover {
+ width: 30rem;
}
.clock-face {
@@ -53,6 +71,7 @@
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
+ border-radius: 50%;
}
.hand {
@@ -61,12 +80,52 @@
background:black;
position: absolute;
top:50%;
+ transform-origin: 100%;
+ transform: rotate(90deg);
+ transition: all 0.05s;
+ transition-timing-function: cubic-bezier(0.15, 2.14, 0.58, 1);
+ }
+
+ .hour-hand {
+ width: 30%;
+ left: 20%;
+ }
+
+ .second-hand {
+ width: 40%;
+ left: 10%;
+ height: 3px;
+ }
+
+ .min-hand {
+ width: 35%;
+ left: 15%;
}
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index bf0f33e3ba..b18d90cd12 100644
--- a/03 - CSS Variables/index-START.html
+++ b/03 - CSS Variables/index-START.html
@@ -12,7 +12,7 @@
Update CSS Variables with JS
-
+
@@ -23,15 +23,31 @@ Update CSS Variables with JS