css

questions.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Questions</title>
     <script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script>
+    <link href='https://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet'>
     <link rel="stylesheet" href="resources/questions/style.css">
     <link rel="stylesheet" href="resources/global/style.css">
     <script type="text/javascript" src="resources/questions/scenarios.js"></script>
@@ -29,12 +30,11 @@
       </ul>
     </nav>
 
-    <h2 id="who">The Who Questions</h2>
-    <p>
-      Welcome to the server! It seems like you're interested
-      in becoming an official member, so before we accept you
-      into our community, we'd like to get to know you.
-    </p>
+    <h2 id="who">Who</h2>
+    <h3 class="welcome">Welcome to Chromagaming!</h3>
+    <p>It seems like you're interested in becoming an official member.</p>
+    <p>Before we accept you into our community, we'd like to get to know you first.</p>
+
     <ul>
       <li>Name<br />
       <input type="text" name="" value=""></li>
@@ -46,6 +46,8 @@
       <input type="text" name="" value=""></li>
       <li>What made you interested in us?<br ./>
       <input type="text" name="" value=""></li>
+      <li>Minecraft Username</li>
+      <input type="text" name="" value=""></li>
       <li>Do you have Discord? What's your username?<br ./>
       <input type="text" name="" value=""></li>
       <li>Do you have a Reddit Account? If so, what's your username?<br ./>
@@ -60,30 +62,36 @@
       <input type="submit">
     </ul>
 
-    <h2 id="what">The What Questions</h2>
+    <h2 id="what">What</h2>
+    <h3>Every server has its rules</h3>
     <p>
-      Every server has rules, although our rules are a bit more
+      Although our rules are a bit more
       straight forward than usual. This section tests your knowledge
       of our rules.
     </p>
     <ul>
-      <li><em>If we can't make a list of questions about our rules
+      <li><em>If we can't make questions about our rules,
       then we can put the actual ruleset in here</em></li>
-      <li><em>This should be a "sanity" check, to see
+      <li><em>This should be a "sanity" check. It should see
       if applicants are paying attention to the questions at all.</em></li>
-      <li><em>Consider this a basic filter</em></li>
+      <li><em>Consider this a basic filter.</em></li>
     </ul>
 
-    <h2 id="why">The Why Questions</h2>
+    <h2 id="why">Why</h2>
+    <h3>Our server runs on a case by case basis</h3>
     <p>
-      Our server runs on a case by case basis, so naturally,
-      instead of testing you on the rules of the land, it'd be
+      Therefore instead of testing you on the rules of the land, it'd be
       more appropriate to test you on your ability to react.
-      <br />
+    </p>
+    <p>
       Following are scenarios, where <strong>multiple answers
-      are correct.</strong> Choose the awnser that you feel is
-      most important: the action you'd perform first.
-      <br />
+      </strong>are correct. Choose the awnser that you feel is
+      most important.
+    </p>
+    <p>
+      Choose the action you'd perform first.
+    </p>
+    <p>
       It doesn't matter <em>what</em> your awnser to this question is.
       What matters in this case is <em>why</em> you
       choose the awnser.
@@ -103,7 +111,7 @@
       developer or post to #feedback on Discord.
     </em>
   </p>
-  <h2 id="how">The How Questions</h2>
+  <h2 id="how">How</h2>
   <p>
     Congratulations! By filling out this form, you have been given
     a few basic permissions. Feel free to roam around spawn, view
@@ -114,11 +122,11 @@
     your application. Till then, have fun!
   </p>
   <p id="application-status">Your application is awaiting approval</p>
-
+  <div class="footer-image-links">
     <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
     <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
     <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
     <img src="./resources/questions/images/64pxWhiteBox.png" alt="placeholder">
-
+  </div>
   </body>
 </html>

resources/global/style.css

@@ -1,6 +0,0 @@
-p, li{
-  font-family: Helvetica;
-}
-h1 {
-  font-family: "Raleway", sans-serif;
-}

resources/questions/scenarios.js

@@ -6,7 +6,7 @@ window.onload = function(){
     let $trueOutputElement = $("<li></li>")
     $trueOutputElement.attr("id", `scenarios-${scenario.name}`);
 
-    let $outputElement = $("<div class=\"accordion-panel\"></div>")
+    let $outputElement = $("<div class=\"accordion-panel\"></div>");
 
     //Create Control Element
     const isAccordion = true;

resources/questions/style.css

@@ -1,11 +1,40 @@
+html{
+  margin: 0 auto;
+  width: 600px;
+  background-color: lightgray;
+}
 li, li p{
   font-family: "Times New Roman";
 
 }
+h2 {
+  font-family: "Lucida Sans Unicode";
+  font-weight: lighter;
+  display: none;
+}
+h3{
+  font-family: Balthazar;
+  font-weight: bolder;
+  font-style: italic;
+  font-size: 30px;
+}
+p {
+  font-family: Georgia;
+  font-size: 17px;
+}
+
 .aside{
   color: rgb(250, 250, 250);
 }
 
+.footer-image-links{
+  display: block;
+  margin: 10px auto;
+  width: 400px;
+}
+.footer-image-links img{
+  padding: 5px;
+}
 
 #scenarios li p.adult{
   font-family: monospace;