make quiz 2 rows

content/stylesheets/quiz.css

@@ -0,0 +1,88 @@
+.main_content {
+  margin-top: 5rem;
+}
+.quiz_content {
+  max-width: 900px;
+  margin: 0 auto;
+}
+.question_wrapper {
+  padding: 1rem 0 0 2rem;
+  position: relative;
+}
+
+.question_wrapper:before {
+  content: "";
+  position: absolute;
+  top: 2rem;
+  left: -7px;
+  background: silver;
+  height: calc(100% - 2rem);
+  width: 3px;
+}
+
+#postcodeField {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+#postcodeField::-webkit-outer-spin-button,
+#postcodeField::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+#postcodeField[type="number"] {
+  -moz-appearance: textfield;
+}
+
+fieldset {
+  max-height: 60vh;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  overflow-y: auto;
+  margin: auto;
+}
+#postcodeField {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+#postcodeField::-webkit-outer-spin-button,
+#postcodeField::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+#postcodeField[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.form {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+}
+
+.form__element {
+  margin: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.form__element__text {
+  margin-left: 10px;
+}
+.form__element__text::first-letter {
+  text-transform: uppercase;
+}
+
+h3::first-letter {
+  text-transform: uppercase;
+}
+
+.buttons {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+}

layouts/quiz.erb

@@ -1,16 +1,24 @@
-<div>
-  <% @items.find_all("/quiz/*").each_with_index do |quest, i| %>
-    <div id="question_<%=i+1%>" class="question hidden">
+<div id="quiz_intro" class="hidden quiz_content">
+  <h2 class="page-header-sub">Welke verenigingen passen bij jou?</h2>
+  <p>Het invullen van deze quiz zal jou helpen de vereniging te vinden die bij jou past.</p>
+  <p>Niet alle vragen hoeven ingevuld te worden en bij sommige vragen komen plots bijvragen tevoorschijn.</p>
+  <div onclick="goNext()" class="quizSpotlight">
+    <a>Start</a>
+  </div>
+</div>
+<div class="quiz_content">
+  <% @items.find_all("/quiz/*").sort_by{ |x| x.path }.each_with_index do |quest, i| %>
+    <div id="question_<%=i+1%>" class="question question_wrapper hidden">
       <%= render '/partials/question.*', question: quest, number: i.to_s %>
     </div>
   <% end %>
 </div>
 <div class="hidden">
   <h3> Deze verenigingen kan je eens uitchecken ;) </h3>
-  <div id="resultWrapper">
+  <div id="resultWrapper" class="fancy_link_container">
   </div>
 </div>
-<div class="buttons">
+<div class="buttons quiz_content">
   <div>
     <button id="previousButton" onclick="goPrevious()">
       Vorige
@@ -180,7 +188,8 @@
 
       const create_wrapper= document.createElement('div');
       create_wrapper.innerHTML = _results[ver];
-      create_wrapper.style.order = val;
+      const el = create_wrapper.firstChild;
+      el.style.order = val;
       resultWrapper.appendChild(create_wrapper);
     }
   }