add speak number guessing game styling

solygambas · solygambas · commit 4dddc20e457f · 2021-03-17T13:19:20.000+01:00
diff --git a/78-speak number guessing game/index.html b/78-speak number guessing game/index.html
@@ -0,0 +1,21 @@
+<!-- Reference: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Speak Number Guess</title>
+  </head>
+  <body>
+    <img
+      src="https://image.flaticon.com/icons/svg/3787/3787697.svg"
+      alt="Speak"
+    />
+    <h1>Guess a Number Between 1 - 100</h1>
+    <h2>Speak the number into your microphone</h2>
+    <div id="msg" class="msg"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/78-speak number guessing game/style.css b/78-speak number guessing game/style.css
@@ -0,0 +1,72 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: #27273d url('https://images.unsplash.com/photo-1534595461757-4974c5072dff?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
+  color: rgba(255,255,255,0.87);
+  font-family: "Roboto", sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
+
+body::after {
+  content: '';
+  background-color: rgba(0,0,0,0.7);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body * {
+  z-index: 1;
+}
+
+img {
+  width: 16rem;
+  height: 16rem;
+}
+
+h1, h2 {
+  margin-bottom: 0;
+}
+
+h2 {
+  font-size: 1.17rem;
+}
+
+p {
+  line-height: 1.5;
+  margin: 0;
+}
+
+.play-again {
+  padding: 0.5rem 1rem;
+  border: 0;
+  background-color: #f4f4f4;
+  border-radius: 5px;
+  margin-top: 0.625rem;
+}
+
+.msg {
+  font-size: 1.5rem;
+  margin-top: 2.5rem;
+}
+
+.box {
+  border: 1px solid #dedede;
+  display: inline-block;
+  font-size: 1.875rem;
+  margin: 1.25rem;
+  padding: 0.625rem;
+}
