Stylesheet and blank script.

apps/careers/templates/careers/benefits.html

@@ -1,82 +1,87 @@
 {% extends "base.html" %}
+{% set scrypts = ('benefits',) %}
+
+{% block site_css %}
+  {{ super() }}
+  {{ css('benefits') }}
+{% endblock %}
+
+{% block js %}
+  {{ js('benefits') }}
+{% endblock %}
 
 {% block page_title %}Benefits | Careers | {{ super() }}{% endblock %}
 
 {% block content %}
-  <hgroup style="clear: both; float: left; width: 40%">
+  <hgroup>
     <h1>Benefits &amp; Perks</h1>
     <h2>We take care of our people.</h2>
   </hgroup>
-  <div style="float: left; width: 60%; height: 220px; background-color: #00f; color: #fff">
-    <div style="margin: 0 auto; padding-top: 100px; text-align: center;">FPO</div>
+  <div class="header" style="background-color: #00f; color: #fff">
+    <div style="margin: 0 auto; padding-top: 100px; text-align: center;">
+      FPO<br/>(588px by 220px)
+    </div>
   </div>
 
-  <div style="float: left; margin-top: 10px; width: 40%">
-    <div>
-      <h3>We've got you covered</h3>
-      <ul>
-        <li>Comprehensive medical, dental, vision</li>
-        <li>Optional life, disability</li>
-        <li>Generous retirement plan</li>
-        <li>Ample time for vacation</li>
-        <li>Good work-life balance</li>
-        <li>Health + Wellness credits? (maybe "flex spending plan" or something)</li>
-      </ul>
-    </div>
+  <section class="text top">
+    <h3>We've got you covered</h3>
+    <ul>
+      <li>Comprehensive medical, dental, vision</li>
+      <li>Optional life, disability</li>
+      <li>Generous retirement plan</li>
+      <li>Ample time for vacation</li>
+      <li>Good work-life balance</li>
+      <li>Health + Wellness credits? (maybe "flex spending plan" or something)</li>
+    </ul>
   
-    <div>
-      <h3>Feel good</h3>
-      <ul>
-        <li>Work with a purpose</li>
-        <li>Help make the web better</li>
-        <li>Make a difference</li>
-        <li>Meet the people you help</li>
-        <li>Have no secrets</li>
-      </ul>
-    </div>
-  </div>
+    <h3>Feel good</h3>
+    <ul>
+      <li>Work with a purpose</li>
+      <li>Help make the web better</li>
+      <li>Make a difference</li>
+      <li>Meet the people you help</li>
+      <li>Have no secrets</li>
+    </ul>
+  </section>
 
-  <div style="float: left; margin-top: 10px; width: 60%; height: 300px">
+  <section class="dynamic top">
     <div style="height: 100%; background-color: #00f; color: #fff;">
-      <div style="margin: 0 auto; padding-top: 100px; text-align: center;">FPO</div>
+      <div style="margin: 0 auto; padding-top: 100px; text-align: center;">
+        FPO<br/>(588px by 300px)
+      </div>
     </div>
-  </div>
+  </section>
 
-
-  <div style="float: left; margin-top: 10px; width: 60%; height: 330px;">
+  <section class="dynamic bottom">
     <div style="height: 100%; background-color: #00f; color: #fff;">
-      <div style="margin: 0 auto; padding-top: 100px; text-align: center;">FPO</div>
+      <div style="margin: 0 auto; padding-top: 100px; text-align: center;">
+        FPO<br/>(588 by 330px)
+      </div>
     </div>
-  </div>
-  <div style="float: left; margin-top: 10px; width: 40%">
-    <div>
-      <h3>Be visible</h3>
-      <ul>
-        <li>Help millions of people</li>
-        <li>Work on top 100 sites</li>
-        <li>Speak about how you did it</li>
-        <li>Meet industry leaders from other companies</li>
-      </ul>
-    </div>
-  
-    <div>
-      <h3>Learn well</h3>
-      <ul>
-        <li>Learn from the best engineers</li>
-        <li>Adopt and practice open standards</li>
-        <li>See things from a global perspective</li>
-        <li>Tackle the tough issues</li>
-      </ul>
-    </div>
-  
-    <div>
-      <h3>Take a step up</h3>
-      <ul>
-        <li>Managers who care about your career</li>
-        <li>Get rewarded for hard work</li>
-        <li>Many opportunities to lead</li>
-      </ul>
-    </div>
-  </div>
+  </section>
 
+  <section class="text bottom">
+    <h3>Be visible</h3>
+    <ul>
+      <li>Help millions of people</li>
+      <li>Work on top 100 sites</li>
+      <li>Speak about how you did it</li>
+      <li>Meet industry leaders from other companies</li>
+    </ul>
+  
+    <h3>Learn well</h3>
+    <ul>
+      <li>Learn from the best engineers</li>
+      <li>Adopt and practice open standards</li>
+      <li>See things from a global perspective</li>
+      <li>Tackle the tough issues</li>
+    </ul>
+  
+    <h3>Take a step up</h3>
+    <ul>
+      <li>Managers who care about your career</li>
+      <li>Get rewarded for hard work</li>
+      <li>Many opportunities to lead</li>
+    </ul>
+  </section>
 {% endblock %}

media/css/benefits.css

@@ -0,0 +1,38 @@
+hgroup {
+    clear: both;
+    float: left;
+    width: 40%;
+}
+
+div.header {
+    float: left;
+    height: 220px;
+    width: 60%;
+}
+
+section {
+    float: left;
+    margin-top: 10px;
+    padding: 5px;
+}
+
+section.text {
+    width: 377px;
+}
+
+section.dynamic {
+    width: 578px;
+}
+
+section.top {
+    height: 300px;
+}
+
+section.bottom {
+    height: 330px;
+}
+
+ul {
+    list-style-type: none;
+}
+

settings.py

@@ -144,6 +144,9 @@ MINIFY_BUNDLES = {
             'css/covehead/content.css',
             'css/careers.css',
         ),
+        'benefits': (
+            'css/benefits.css',
+        ),
     },
     'js': {
         'common': (
@@ -151,6 +154,9 @@ MINIFY_BUNDLES = {
             'js/util.js',
             'js/nav-main.js',
         ),
+        'benefits': (
+            'js/benefits.js',
+        ),
     }
 }