customise typing game

give it a better look and remove unnecessary lines
5 months ago · ffe6587e15
parent cd6eddfd1a
commit ffe6587e15
2 changed files with 14 additions and 9 deletions
--- a/4-typing-game/solution/index.css
+++ b/4-typing-game/solution/index.css
@ -6,3 +6,6 @@
 	background-color: lightcoral;
 	border-color: red;
 }
+.container{
+	display: flex;
+}
--- a/4-typing-game/solution/index.html
+++ b/4-typing-game/solution/index.html
@ -8,15 +8,17 @@

 	<body>
 		<h1>Practice your typing</h1>
-		<div>Click start to have a quote displayed. Type the quote as fast as you can!</div>
-
-		<p id="quote"></p>
-		<p id="message"></p>
-		<div>
-			<input type="text" aria-label="current word" id="typed-value" />
-		</div>
-		<div>
-			<button id="start" type="button">Start</button>
+		
+		<p>Click start to have a quote displayed. Type the quote as fast as you can!</p>
+			<p id="quote"></p>
+			<p id="message"></p>
+			<div class="container">
+			<div>
+				<input type="text" aria-label="current word" id="typed-value" />
+			</div>
+			<div>
+				<button id="start" type="button">Start</button>
+			</div>
 		</div>
 		<script src="./index.js"></script>
 	</body>