keyboard added to tools in main

index.html

@@ -16,10 +16,10 @@
 
     <div id="welcome" class="welcome">
         <h1>Welcome!</h1>
-        <h2>This is a website for future tools. The source code can be found on my <a href="https://github.com/zyqunix/tools" target="_blank">GitHub!</a></h2>
+        <h2>This is a website for future tools. The source code can be found on my <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>!</h2>
         <h3>Clicking "Test It" will open the tool in the current tab.</h3>
-        <h3>More tools will come in the future. I am currently working on a keyboard-key-tester.</h3>
-        <h3>MOTD: "Good girls are found in every corner of the earth - this is why the earth is round." - Devenz</h3>
+        <h3>More tools will come in the future.</h3>
+        <h3>MOTD: "To the mind that is still, the whole universe surrenders." - Lao Tzu</h3>
         
     </div>
 
@@ -34,6 +34,15 @@
             <a id="visit" class="visit-tool" href="/click">Test It</a>
         </div> 
 
+        <div id="tool-div" class="mouse-test">
+            <h1 class="tool-header">Keyboard Test</h1>
+            <h2 class="tool-desc">This allows you to test your keyboard's keys to see if they all work!</h2>
+            <div class="slideshow-container">
+                <img class="tool-media"  src="assets/keyboard.png" alt="Keyboard Image">
+            </div>
+            <a id="visit" class="visit-tool" href="/keyboard">Test It</a>
+        </div> 
+
     </div>
 
     <script src="theme.js"></script>

style.css

@@ -123,6 +123,7 @@ img {
 .tool-desc {
     margin: 5px;
     font-weight: normal;
+    max-width: 60%;
 }
 
 .tool-media {