Getting there with the school-specific contest landing page.

server/static/css/base.css

@@ -34,14 +34,21 @@ html {
   font-style: normal;
 }
 
+/** Further reset; why doesn't modern-normalize do this? */
 
-
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
 
 /* All containers behave this way. */
 .container {
-  width: 100%;
-  margin-left: 0.25em;
-  margin-right: 0.25em;
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 
 

server/vb/templates/includes/faq.dhtml

@@ -0,0 +1,56 @@
+<div>
+  <style>
+    self {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      padding-top: 2.5rem;
+      padding-bottom: 2.5rem;
+    }
+
+    self .qa {
+      display: flex;
+      flex-direction: column;
+    }
+
+    self h2 {
+      font-size: 36px;
+      font-weight: 440;
+      line-height: 130%;
+      margin-bottom: 1rem;
+    }
+
+    self h3 {
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 28px;
+    }
+
+    self p {
+      font-weight: 378;
+      font-size: 18px;
+      line-height: 28px;
+      opacity: 0.7;
+    }
+  </style>
+  <h2>F.A.Q.</h2>
+  <div class="qa">
+    <h3>Who organized the Voter Bowl?</h3>
+    <p>
+      The Voter Bowl is a non-profit project of Front Seat.
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </p>
+  </div>
+  <div class="qa">
+    <h3>Lorem ipsum lorem ipsum?</h3>
+    <p>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </p>
+  </div>
+</div>

server/vb/templates/school.dhtml

@@ -6,19 +6,6 @@
 
 {% block body %}
   <div>
-    {# djlint:off #}
-    <style>
-      .background {
-        background-color: {{ school.logo.bg_color }};
-        color: {{ school.logo.bg_text_color }};
-      }
-
-      .action {
-        background-color: {{ school.logo.action_color }};
-        color: {{ school.logo.action_text_color }};
-      }
-</style>
-    {# djlint:on #}
     <style>
       self {
         width: 100%;
@@ -29,13 +16,51 @@
 
       self .cta {
         width: 100%;
+        text-align: center;
+      }
+
+      self .cta img {
+        height: 150px;
+        margin: 1.5rem 0;
+      }
+
+      self .cta p {
+        font-weight: 378;
+        font-size: 20px;
+        line-height: 130%;
+      }
+
+      self .cta h2 {
+        font-weight: 500;
+        font-size: 36px;
+        line-height: 120%;
+        text-transform: uppercase;
       }
 
       self .faq {
+        width: 100%;
         color: white;
       }
+
+      self .giveaway {
+        height: 10rem;
+      }
     </style>
-    <div class="cta background">Hello friends.</div>
-    <div class="faq">Hello</div>
+    <div class="cta"
+         style="background-color: {{ school.logo.bg_color }};
+                color: {{ school.logo.bg_text_color }}">
+      <div class="container">
+        <div class="giveaway"></div>
+        <img src="{{ school.logo.url }}"
+             alt="{{ school.short_name }} {{ school.mascot }} logo" />
+        <h2>Welcome to the Voter Bowl</h2>
+        <p>
+          {{ school.short_name }} students: check your voter registration status for a 1 in 10 chance to win a $25 Amazon gift card.
+        </p>
+      </div>
+    </div>
+    <div class="faq">
+      <div class="container">{% include "includes/faq.dhtml" %}</div>
+    </div>
   </div>
 {% endblock body %}