diff --git a/css/artsey-tutor.css b/css/artsey-tutor.css index 64fbd82..4ca4b28 100644 --- a/css/artsey-tutor.css +++ b/css/artsey-tutor.css @@ -36,7 +36,7 @@ body { align-self: auto; order: 0; width: 500px; - font-size: 44px; + font-size: 28px; text-align: center; margin: 0 auto 20px; } @@ -62,7 +62,7 @@ body { padding: 12px; margin: 0 auto; background-color: slategray; - visibility: collapse; + opacity: 0; } .keyboard-key { @@ -145,4 +145,10 @@ body { width: 200px; font-size: 36px; background-color: steelblue; +} + +#content-area { + border: 2px solid black; + margin-top: 100px; + border-radius: 4px; } \ No newline at end of file diff --git a/index.html b/index.html index 6807769..266208d 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ ARTSEY Typing Tutor - + @@ -19,48 +19,35 @@ - ARTSEY Typing Tutor + ARTSEY Typing Tutor - -
-
-
-
- +
+
+
Hello there!
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+ +
+
-
-
- -
-
- + \ No newline at end of file diff --git a/js/artsey-tutor.js b/js/artsey-tutor.js index 83eb4fe..47419b6 100644 --- a/js/artsey-tutor.js +++ b/js/artsey-tutor.js @@ -121,7 +121,7 @@ $(document).ready(async function () { await setTypingText(currentString); await sleep(500); await setNextLetter(); - $("#keyboard").css({opacity: 0, visibility: "visible"}).animate({opacity: 100}, 200, function () { + $("#keyboard").animate({opacity: 1.0}, 1000, function () { console.log("keyboard visible!"); }); }) diff --git a/learn.html b/learn.html new file mode 100644 index 0000000..5ad023d --- /dev/null +++ b/learn.html @@ -0,0 +1,60 @@ + + + + + ARTSEY Typing Tutor + + + + + + + +
+
+
+
Click the button below to start.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + + + + \ No newline at end of file