Changed css and added rules to start page

l-yang-05 · Oct 10, 2019 · 7af6c37 · 7af6c37
1 parent df62514
commit 7af6c37
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 9 deletions.
diff --git a/src/App.css b/src/App.css
@@ -46,17 +46,47 @@ input {
 }
 
 .container-start{
-  margin-top: 10%;
+  margin-top: 5%;
   text-align: center;
 }
 
 .container-start header{
   font-weight: bold;
-  font-size: 110px;
+  font-size: 80px;
+}
+
+.container-start h2{
+  font-size: 40px;
+  color:lemonchiffon;
+  margin: 0;
+}
+
+.container-start h3{
+  font-size: 36px;
 }
 
 .container-start p{
-  font-size: 50px;
+  font-size: 25px;
+}
+
+.difficulty{
+  margin-top:100px;
+
+}
+
+.desc{
+  color: lemonchiffon;
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  justify-content: center;
+  margin: 0 auto;
+  text-align: left;
+}
+
+.desc p{
+  font-size: 20px;
 }
 
 .container-score{

diff --git a/src/App.js b/src/App.js
@@ -186,12 +186,19 @@ const App = () => {
   else {
     return (
       <div className="container-start">
-        <header className="Title_Start">Game Start</header>
-        <p>Select the difficulty:</p>
-        <form>
-          <button type='button' onClick={standard}>Standard</button>
-          <button type='button' onClick={expert}>Expert</button>
-        </form>
+        <header className="Title_Start">Number Guessing Game</header>
+        <h2 className="rules">Rules:</h2>
+        <p className="desc">
+          First, choose a difficulty! (Easy: 1-10; Hard: 1-100). Enter in a number to see if your guess was right. Keep on trying
+          to win and try beating your highscore! You can do it! :D
+        </p>
+        <div className="difficulty">
+          <h3>Select the difficulty:</h3>
+          <form>
+            <button type='button' onClick={standard}>Standard</button>
+            <button type='button' onClick={expert}>Expert</button>
+          </form>
+        </div>
       </div>
     );
   }