diff --git a/4-typing-game/solution/index.css b/4-typing-game/solution/index.css
index c1767359..ee890731 100644
--- a/4-typing-game/solution/index.css
+++ b/4-typing-game/solution/index.css
@@ -1,8 +1,294 @@
+@import url('https://fonts.googleapis.com/css2?family=Peralta&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;400&family=Peralta&display=swap');
.highlight {
- background-color: yellow;
+ background-color: #E1CEB5;
+ color: darkblue;
+}
+body{
+ background-color: pink;
+ text-align: center;
+}
+.container{
+ margin: 200px auto;
+}
+h1{
+ font-family: 'Peralta', cursive;
+ font-size: 6em;
+ position: relative;
+ bottom: 50px;
+ color:red;
}
-
.error {
- background-color: lightcoral;
+ background-color: red;
border-color: red;
+ font-weight: bold;
+ color:rgb(0, 0, 0);
+}
+#quote{
+ margin: 20px auto;
+ font-family: 'Noto Sans Mono', monospace;
+ font-weight: bold;
+ color:#E1CEB5;
+}
+#typed-value{
+ font-weight: bold;
+}
+#message{
+ font-family: 'Noto Sans Mono', monospace;
+ font-weight: 100;
+ color:#E1CEB5;
+}
+.msg{
+ font-family: 'Noto Sans Mono', monospace;
+ font-weight: 100;
+ color:#E1CEB5;
+}
+.btn{
+ margin-top: 5px;
+}
+body {
+ background: #00b4ff;
+ color: #333;
+ font: 100% Lato, Arial, Sans Serif;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+}
+
+#background-wrap {
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: -1;
+}
+
+/* KEYFRAMES */
+
+@-webkit-keyframes animateBubble {
+ 0% {
+ margin-top: 1000px;
+ }
+ 100% {
+ margin-top: -100%;
+ }
+}
+
+@-moz-keyframes animateBubble {
+ 0% {
+ margin-top: 1000px;
+ }
+ 100% {
+ margin-top: -100%;
+ }
}
+
+@keyframes animateBubble {
+ 0% {
+ margin-top: 1000px;
+ }
+ 100% {
+ margin-top: -100%;
+ }
+}
+
+@-webkit-keyframes sideWays {
+ 0% {
+ margin-left:0px;
+ }
+ 100% {
+ margin-left:50px;
+ }
+}
+
+@-moz-keyframes sideWays {
+ 0% {
+ margin-left:0px;
+ }
+ 100% {
+ margin-left:50px;
+ }
+}
+
+@keyframes sideWays {
+ 0% {
+ margin-left:0px;
+ }
+ 100% {
+ margin-left:50px;
+ }
+}
+
+/* ANIMATIONS */
+
+.x1 {
+ -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
+
+ left: -5%;
+ top: 5%;
+
+ -webkit-transform: scale(0.6);
+ -moz-transform: scale(0.6);
+ transform: scale(0.6);
+}
+
+.x2 {
+ -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
+ animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
+
+ left: 5%;
+ top: 80%;
+
+ -webkit-transform: scale(0.4);
+ -moz-transform: scale(0.4);
+ transform: scale(0.4);
+}
+
+.x3 {
+ -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
+
+ left: 10%;
+ top: 40%;
+
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ transform: scale(0.7);
+}
+
+.x4 {
+ -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
+ animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
+
+ left: 20%;
+ top: 0;
+
+ -webkit-transform: scale(0.3);
+ -moz-transform: scale(0.3);
+ transform: scale(0.3);
+}
+
+.x5 {
+ -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
+ animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
+
+ left: 30%;
+ top: 50%;
+
+ -webkit-transform: scale(0.5);
+ -moz-transform: scale(0.5);
+ transform: scale(0.5);
+}
+
+.x6 {
+ -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
+
+ left: 50%;
+ top: 0;
+
+ -webkit-transform: scale(0.8);
+ -moz-transform: scale(0.8);
+ transform: scale(0.8);
+}
+
+.x7 {
+ -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
+
+ left: 65%;
+ top: 70%;
+
+ -webkit-transform: scale(0.4);
+ -moz-transform: scale(0.4);
+ transform: scale(0.4);
+}
+
+.x8 {
+ -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
+ animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
+
+ left: 80%;
+ top: 10%;
+
+ -webkit-transform: scale(0.3);
+ -moz-transform: scale(0.3);
+ transform: scale(0.3);
+}
+
+.x9 {
+ -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
+ animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
+
+ left: 90%;
+ top: 50%;
+
+ -webkit-transform: scale(0.6);
+ -moz-transform: scale(0.6);
+ transform: scale(0.6);
+}
+
+.x10 {
+ -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ -moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
+ animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
+
+ left: 80%;
+ top: 80%;
+
+ -webkit-transform: scale(0.3);
+ -moz-transform: scale(0.3);
+ transform: scale(0.3);
+}
+
+/* OBJECTS */
+
+.bubble {
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+
+ -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
+ -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
+
+ height: 200px;
+ position: absolute;
+ width: 200px;
+}
+
+.bubble:after {
+ background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
+ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
+ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
+ background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+
+ -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
+ -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
+ box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
+
+ content: "";
+ height: 180px;
+ left: 10px;
+ position: absolute;
+ width: 180px;
+}
\ No newline at end of file
diff --git a/4-typing-game/solution/index.html b/4-typing-game/solution/index.html
index a4742715..4d8faaff 100644
--- a/4-typing-game/solution/index.html
+++ b/4-typing-game/solution/index.html
@@ -4,11 +4,13 @@
Typing
+
-
-
- Practice your typing
- Click start to have a quote displayed. Type the quote as fast as you can!
+
+
+
Practice your typing
+
Click start to have a quote displayed. Type the quote as fast as you can!
@@ -16,8 +18,22 @@
-
+
+
+
+