From ce223c394a919c48fd2dd59cb5ad549ec254a6ac Mon Sep 17 00:00:00 2001
From: Abdurrahman <yabdurrahman478@gmail.com>
Date: Mon, 24 Aug 2020 16:11:42 +0530
Subject: [PATCH] Some UI Improvments

---
 js/app.js       | 10 +++----
 styles/main.css | 80 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 5 deletions(-)

diff --git a/js/app.js b/js/app.js
index 44e827b..5670f97 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,27 +3,27 @@ var state = {
   questions: [
     {
       text: "Which number am I thinking of?",
-      choices: ["1", "2", "3", "4"],
+      choices: [" 1", " 2", " 3", " 4"],
       correctChoiceIndex: 0
     },
     {
       text: "What about now, can you guess now?",
-      choices: ["1", "2", "3", "4"],
+      choices: [" 1", " 2", " 3", " 4"],
       correctChoiceIndex: 1
     },
     {
       text: "I'm thinking of a number between 1 and 4. What is it?",
-      choices: ["1", "2", "3", "4"],
+      choices: [" 1", " 2", " 3", " 4"],
       correctChoiceIndex: 2,
     },
     {
       text: "If I were a number between 1 and 4, which would I be?",
-      choices: ["1", "2", "3", "4"],
+      choices: [" 1", " 2", " 3", " 4"],
       correctChoiceIndex: 3,
     },
     {
       text: "Guess what my favorite number is",
-      choices: ["1", "2", "3", "4"],
+      choices: [" 1", " 2", " 3", " 4"],
       correctChoiceIndex: 0,
     }
   ],
diff --git a/styles/main.css b/styles/main.css
index 3dde1dd..269f711 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,8 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');
+
 * {
 	box-sizing: border-box;
 	font-family: 'Roboto', sans-serif;
 }
 
+body {
+	background: #000428;  /* fallback for old browsers */
+	background: -webkit-linear-gradient(to right, #004e92, #000428);  /* Chrome 10-25, Safari 5.1-6 */
+	background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+	color: #FFF;
+	text-align: center;
+}
+
+/*Styling Heading and Content inside*/
+.container main .start-page h1 {
+	font-family: 'Pacifico', cursive;
+	text-align: center;
+	font-size: 4rem;
+	margin-top: 0;
+	margin-bottom: 50px;
+}
+
+.container main .start-page p {
+	display: block;
+	margin: auto;
+	font-family: 'Architects Daughter', cursive;
+	font-size: 1.5rem;
+	margin-bottom: 40px;
+}
+
+/*Styling the buttons*/
+button {
+	background-color: #FFFFFF;
+	border: none;
+	border-radius: 5px;
+	color: #006699;
+	font-size: 30px;
+	padding: 10px;
+	margin: 10px;
+}
+
+button:hover {
+	color: #FFFFFF;
+	background-color: #006699;
+} 
+
+/*Styling the choices*/
+.choices {
+	list-style-type: none;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.choices li {
+	font-size: 30px;
+	margin: 20px;
+}
+
+/*Styling Questions*/
+.question-page h3 {
+	font-size: 2.5rem;
+	font-family: 'Domine', serif;
+}
+
+/*Styling Feedbacks*/
+.feedback-header {
+	font-size: 3rem;
+}
+
+.feedback-text, .results-text {
+	display: block;
+	margin: 30px auto;
+	font-size: 1.5rem;
+}
 
 main {
 	max-width: 960px;
@@ -18,15 +93,20 @@ p {
 	padding-top: 90px;
 }
 
+
+
 .user-was-correct::before {
 	content: "Shhhh!!!!! (";
+	
 }
 
 .user-was-correct::after {
 	content: ")";
+
 }
 
 .user-was-incorrect {
+	font-family: 'Francois One', sans-serif;
 	font-size: 50px;
 	color: red;
 }
\ No newline at end of file