From 10fb969d3387dfb4d993d4e85fbaa1509b60bef7 Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 11 Jun 2018 14:13:12 -0400
Subject: [PATCH 1/9] Remove responsive breakpoints and make compact

---
 scss/atat.scss                 |  3 +-
 scss/base/_variables.scss      |  1 +
 scss/sections/_footer.scss     |  9 ++++++
 scss/sections/_layout.scss     | 17 -----------
 scss/sections/_navigation.scss | 16 ++++++++++
 templates/footer.html.to       | 53 ++++------------------------------
 templates/header.html.to       |  1 -
 7 files changed, 33 insertions(+), 67 deletions(-)
 create mode 100644 scss/sections/_footer.scss
 delete mode 100644 scss/sections/_layout.scss
 create mode 100644 scss/sections/_navigation.scss

diff --git a/scss/atat.scss b/scss/atat.scss
index 85d20bd8..ef7ad4ae 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -8,6 +8,7 @@
 
 @import 'components/empty_state';
 
-@import 'sections/layout';
+@import 'sections/navigation';
+@import 'sections/footer';
 @import 'sections/login';
 
diff --git a/scss/base/_variables.scss b/scss/base/_variables.scss
index e69de29b..b5fc0d92 100644
--- a/scss/base/_variables.scss
+++ b/scss/base/_variables.scss
@@ -0,0 +1 @@
+$nav-width: 300px;
\ No newline at end of file
diff --git a/scss/sections/_footer.scss b/scss/sections/_footer.scss
new file mode 100644
index 00000000..58ac49ce
--- /dev/null
+++ b/scss/sections/_footer.scss
@@ -0,0 +1,9 @@
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding-top: 0.5rem;
+  padding-bottom: 1em;
+  background-color: $color-gray-lightest;
+  border-top: 1px solid $color-gray-lighter;
+}
\ No newline at end of file
diff --git a/scss/sections/_layout.scss b/scss/sections/_layout.scss
deleted file mode 100644
index 17fbbed7..00000000
--- a/scss/sections/_layout.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.content {
-
-}
-
-header {
-
-}
-
-section {
-
-}
-
-footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-}
\ No newline at end of file
diff --git a/scss/sections/_navigation.scss b/scss/sections/_navigation.scss
new file mode 100644
index 00000000..02ed3b22
--- /dev/null
+++ b/scss/sections/_navigation.scss
@@ -0,0 +1,16 @@
+.usa-navbar {
+  height: 5rem;
+  width: 5%;
+}
+
+.usa-nav {
+  padding-top: 1rem;
+  padding-left: 0;
+}
+
+.usa-nav-primary {
+
+  li:last-child {
+    padding-left: 3rem;
+  }
+}
\ No newline at end of file
diff --git a/templates/footer.html.to b/templates/footer.html.to
index 8b7a6190..47efdb36 100644
--- a/templates/footer.html.to
+++ b/templates/footer.html.to
@@ -1,52 +1,9 @@
-<footer class="usa-footer usa-footer-slim" role="contentinfo">
-  <div class="usa-grid usa-footer-return-to-top">
-    <a href="#">Return to top</a>
-  </div>
-  <div class="usa-footer-primary-section">
-    <div class="usa-grid">
-      <nav class="usa-footer-nav usa-width-two-thirds">
-        <ul class="usa-unstyled-list">
-          <li class="usa-width-one-fourth usa-footer-primary-content">
-            <a class="usa-footer-primary-link" href="javascript:void(0);">Home</a>
-          </li>
-          <li class="usa-width-one-fourth usa-footer-primary-content">
-            <a class="usa-footer-primary-link" href="javascript:void(0);">Accounts</a>
-          </li>
-          <li class="usa-width-one-fourth usa-footer-primary-content">
-            <a class="usa-footer-primary-link" href="javascript:void(0);">Requests</a>
-          </li>
-          <li class="usa-width-one-fourth usa-footer-primary-content">
-            <a class="usa-footer-primary-link" href="javascript:void(0);">Users</a>
-          </li>
-          <li class="usa-width-one-fourth usa-footer-primary-content">
-            <a class="usa-footer-primary-link" href="javascript:void(0);">Reports</a>
-          </li>
-          <li class="usa-width-one-fourth usa-footer-primary-content">
-            <a class="usa-footer-primary-link" href="javascript:void(0);">Usage Calculator</a>
-          </li>
-        </ul>
-      </nav>
-      <address>
-        <div class="usa-width-one-third">
-          <div class="usa-footer-primary-content usa-footer-contact_info">
-            <p>
-              <a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
-            </p>
-          </div>
-          <div class="usa-footer-primary-content usa-footer-contact_info">
-            <p><a href="mailto:info@dds.mil">info@dds.mil</a></p>
-          </div>
-        </div>
-      </address>
-    </div>
-  </div>
+<footer class="usa-footer usa-footer-slim">
 
-  <div class="usa-footer-secondary_section">
-    <div class="usa-grid">
-      <div class="usa-footer-logo">
-        <img class="usa-footer-slim-logo-img" src="/static/img/logo.png" alt="Defense Digital Service Logo">
-        <h3 class="usa-footer-slim-logo-heading">Defense Digital Service</h3>
-      </div>
+  <div class="usa-grid">
+    <div class="usa-footer-logo">
+      <h5 class="usa-footer-slim-logo-heading">Joint Enterprise Defense Infrastructure</h5>
     </div>
   </div>
+  
 </footer>
diff --git a/templates/header.html.to b/templates/header.html.to
index 517eb8df..9c93791c 100644
--- a/templates/header.html.to
+++ b/templates/header.html.to
@@ -16,7 +16,6 @@
             ['requests', 'Requests'],
             ['users', 'Users' ],
             ['reports', 'Reports' ],
-            ['calculator','Usage Calculator'],
             ]
         %}
       <li>

From e252a818195d9824f4e547c15f827cf5730135fb Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 11 Jun 2018 15:28:12 -0400
Subject: [PATCH 2/9] Add step 0 for New Request workflow

---
 scss/atat.scss                      |  3 +--
 templates/requests/screen-0.html.to | 12 ++++++++++++
 templates/requests/screen-1.html.to | 12 ------------
 templates/requests_new.html.to      | 27 ++++++++++++++-------------
 4 files changed, 27 insertions(+), 27 deletions(-)
 create mode 100644 templates/requests/screen-0.html.to

diff --git a/scss/atat.scss b/scss/atat.scss
index ef7ad4ae..db293228 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -10,5 +10,4 @@
 
 @import 'sections/navigation';
 @import 'sections/footer';
-@import 'sections/login';
-
+@import 'sections/login';
\ No newline at end of file
diff --git a/templates/requests/screen-0.html.to b/templates/requests/screen-0.html.to
new file mode 100644
index 00000000..a48e9b63
--- /dev/null
+++ b/templates/requests/screen-0.html.to
@@ -0,0 +1,12 @@
+{% extends '../requests_new.html.to' %}
+
+{% block form %}
+<h2>New JEDI Request</h2>
+
+<p class="usa-font-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus error omnis a, tenetur similique quo officiis voluptates eum recusandae dolorem minus dignissimos, magni consequatur, maxime debitis reprehenderit sint non iusto?</p>
+
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>New Application</a>
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Existing Application</a>
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Sandbox Environment</a>
+
+{% end %}
\ No newline at end of file
diff --git a/templates/requests/screen-1.html.to b/templates/requests/screen-1.html.to
index 80edc411..baa50df0 100644
--- a/templates/requests/screen-1.html.to
+++ b/templates/requests/screen-1.html.to
@@ -155,15 +155,3 @@
 
 
 {% end %}
-
-
-
-<!--
-<div class="usa-width-three-fourths usa-layout-docs-main_content">
-  <h2 id="details-of-use">Details of Use</h2>
-  <p class="usa-font-lead">
-    To use JEDI, we want to know more about your needs for cloud services. Please fill out the form regarding computation, storage, and usage.
-  </p>
-
-
- -->
diff --git a/templates/requests_new.html.to b/templates/requests_new.html.to
index 9c9f7250..75fc8ae2 100644
--- a/templates/requests_new.html.to
+++ b/templates/requests_new.html.to
@@ -2,26 +2,27 @@
 
 {% block content %}
 
-<main class="usa-content" id="main-content">
-
-  <a href="/requests">&#8249; All requests</a>
-  <h1>New Request</h1>
 
 
-  <aside class="usa-width-one-fourth usa-layout-docs-sidenav">
-    {% include 'requests/sidebar.html.to' %}
-  </aside>
-  <div class="usa-width-three-fourths usa-layout-docs-main_content">
+<a href="/requests">&#8249; All requests</a>
+<h1>New Request</h1>
 
-    {% block form %}
+
+<aside class="sidenav usa-width-one-third">
+  {% include 'requests/sidebar.html.to' %}
+</aside>
+
+<main class="main-content usa-width-two-thirds">
+
+  {% block form %}
     form goes here
-    {% end %}
-    {% block next %}
+  {% end %}
+  {% block next %}
     <a class='usa-button usa-button-primary' href='{{ reverse_url('request_form',next_screen) }}'>Save &amp; Continue</a>
-    {% end %}
-  </div>
+  {% end %}
 
 </main>
 
+
 {% end %}
 

From fc8315e31910876511ef12506a973864e23a622d Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 11 Jun 2018 15:29:29 -0400
Subject: [PATCH 3/9] Reduce H1 margin

---
 scss/base/_typography.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scss/base/_typography.scss b/scss/base/_typography.scss
index 53184bac..29833e78 100644
--- a/scss/base/_typography.scss
+++ b/scss/base/_typography.scss
@@ -7,4 +7,8 @@ h1, h2, h3, h4, h5, h6 {
     left: 1rem;
   }
 
+}
+
+h1 {
+  margin-top: 0.5em;
 }
\ No newline at end of file

From b26b534a9055353750cd7109d9f540525ae700e8 Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 11 Jun 2018 15:39:36 -0400
Subject: [PATCH 4/9] Style page action back link

---
 scss/atat.scss                    |  1 +
 scss/components/_site_action.scss | 15 +++++++++++++++
 templates/requests_new.html.to    |  3 ++-
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 scss/components/_site_action.scss

diff --git a/scss/atat.scss b/scss/atat.scss
index db293228..5e7b2131 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -6,6 +6,7 @@
 @import 'base/buttons';
 @import 'base/tables';
 
+@import 'components/site_action';
 @import 'components/empty_state';
 
 @import 'sections/navigation';
diff --git a/scss/components/_site_action.scss b/scss/components/_site_action.scss
new file mode 100644
index 00000000..98af0b18
--- /dev/null
+++ b/scss/components/_site_action.scss
@@ -0,0 +1,15 @@
+.site-action {
+  border-bottom: 1px solid $color-gray-lightest;
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-top: 0.25rem;
+
+  a {
+    font-size: 1.3rem;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: $color-primary !important;
+  }
+
+}
\ No newline at end of file
diff --git a/templates/requests_new.html.to b/templates/requests_new.html.to
index 75fc8ae2..f72f69db 100644
--- a/templates/requests_new.html.to
+++ b/templates/requests_new.html.to
@@ -4,7 +4,8 @@
 
 
 
-<a href="/requests">&#8249; All requests</a>
+<div class="site-action"><a href="/requests">&#8249; All requests</a></div>
+
 <h1>New Request</h1>
 
 

From d9598af72a89c54c99083f74b4d2cb6451ef8b67 Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 11 Jun 2018 15:43:12 -0400
Subject: [PATCH 5/9] Add some breathing room to main section tag

---
 scss/atat.scss           | 1 +
 scss/sections/_main.scss | 3 +++
 templates/base.html.to   | 4 ++--
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 scss/sections/_main.scss

diff --git a/scss/atat.scss b/scss/atat.scss
index 5e7b2131..579c2260 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -9,6 +9,7 @@
 @import 'components/site_action';
 @import 'components/empty_state';
 
+@import 'sections/main';
 @import 'sections/navigation';
 @import 'sections/footer';
 @import 'sections/login';
\ No newline at end of file
diff --git a/scss/sections/_main.scss b/scss/sections/_main.scss
new file mode 100644
index 00000000..9fb92a24
--- /dev/null
+++ b/scss/sections/_main.scss
@@ -0,0 +1,3 @@
+section {
+  margin-bottom: 10rem;
+}
\ No newline at end of file
diff --git a/templates/base.html.to b/templates/base.html.to
index d52ce5ec..2c99539c 100644
--- a/templates/base.html.to
+++ b/templates/base.html.to
@@ -13,11 +13,11 @@
 
   {% include 'header.html.to' %}
 
-  <div class='usa-grid'>
+  <section class='usa-grid'>
     {% block content %}
       these are not the droids you are looking for
     {% end %}
-  </div>
+  </section>
 
 
 

From 5b2a64a3c2e159ce1d5c47a8744ced5a2a40099a Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 11 Jun 2018 15:51:23 -0400
Subject: [PATCH 6/9] Add an initial step to request

---
 templates/requests/screen-0.html.to |  12 ---
 templates/requests/screen-1.html.to | 157 ++--------------------------
 templates/requests/screen-2.html.to | 155 ++++++++++++++++++++++++++-
 templates/requests/screen-3.html.to |   3 +-
 templates/requests/screen-4.html.to |   2 +-
 templates/requests/screen-5.html.to |   5 +-
 templates/requests/screen-6.html.to |  10 ++
 7 files changed, 172 insertions(+), 172 deletions(-)
 delete mode 100644 templates/requests/screen-0.html.to
 create mode 100644 templates/requests/screen-6.html.to

diff --git a/templates/requests/screen-0.html.to b/templates/requests/screen-0.html.to
deleted file mode 100644
index a48e9b63..00000000
--- a/templates/requests/screen-0.html.to
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends '../requests_new.html.to' %}
-
-{% block form %}
-<h2>New JEDI Request</h2>
-
-<p class="usa-font-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus error omnis a, tenetur similique quo officiis voluptates eum recusandae dolorem minus dignissimos, magni consequatur, maxime debitis reprehenderit sint non iusto?</p>
-
-<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>New Application</a>
-<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Existing Application</a>
-<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Sandbox Environment</a>
-
-{% end %}
\ No newline at end of file
diff --git a/templates/requests/screen-1.html.to b/templates/requests/screen-1.html.to
index baa50df0..a48e9b63 100644
--- a/templates/requests/screen-1.html.to
+++ b/templates/requests/screen-1.html.to
@@ -1,157 +1,12 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-<h2>Details of Use</h2>
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque placeat distinctio accusamus quo temporibus facilis, dicta delectus asperiores. Nihil aut quod quibusdam id fugit, officia dolorum laudantium! Quidem tempora, aliquam.</p>
-<form>
-  <h3 id="application-details">Application Details</h3>
-  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+<h2>New JEDI Request</h2>
 
-  <button class="usa-button-secondary usa-button-active">New Application</button>
-  <button class="usa-button-secondary" disabled>Existing Application</button>
-  <button class="usa-button-secondary" disabled>Sandbox Application</button>
+<p class="usa-font-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus error omnis a, tenetur similique quo officiis voluptates eum recusandae dolorem minus dignissimos, magni consequatur, maxime debitis reprehenderit sint non iusto?</p>
 
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>New Application</a>
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Existing Application</a>
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Sandbox Environment</a>
 
-  <label for="input-application-name">Application name</label>
-  <input id="input-application-name" name="input-application-name" type="text" placeholder="What is the application name?">
-
-  <label for="input-application-description">Application description</label>
-  <textarea id="input-application-description" name="input-application-description" placeholder="Describe the application"></textarea>
-
-  <label for="input-type-textarea">Estimated dollar value of use</label>
-  <input id="dollar-value" name="dollar-value" type="text" placeholder="$">
-
-  <label for="input-estimate">How did you arrive at this estimate?</label>
-  <select name="input-estimate" id="input-estimate">
-    <option value="">- Select -</option>
-    <option value="value1">CSP usage calculator</option>
-    <option value="value2">Option B</option>
-    <option value="value3">Option C</option>
-  </select>
-
-  <fieldset>
-    <label for="input-start-date">Expected start date</label>
-    <div class="usa-date-of-birth">
-      <div class="usa-form-group usa-form-group-month">
-        <label for="date_start_1">Month</label>
-        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_1" name="date_start_1" type="number" min="1" max="12" value="">
-      </div>
-      <div class="usa-form-group usa-form-group-day">
-        <label for="date_start_2">Day</label>
-        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_2" name="date_start_2" type="number" min="1" max="31" value="">
-      </div>
-      <div class="usa-form-group usa-form-group-year">
-        <label for="date_start_3">Year</label>
-        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_3" name="date_start_3" type="number" min="1900" max="2000" value="">
-      </div>
-    </div>
-  </fieldset>
-
-
-  <label for="input-period-performance">Desired period of performance</label>
-  <select name="input-period-performance" id="input-period-performance">
-    <option value="">- Select -</option>
-    <option value="value1">30 days</option>
-    <option value="value2">60 days</option>
-    <option value="value3">90 days</option>
-  </select>
-
-  <br>
-
-  <fieldset class="usa-fieldset-inputs usa-sans">
-    <label for="input-period-performance">Classification level</label>
-    <ul class="usa-unstyled-list">
-      <li>
-        <input id="unclassified" type="radio" checked name="classification-level" value="unclassified">
-        <label for="unclassified">Unclassified</label>
-      </li>
-      <li>
-        <input id="secret" type="radio" name="classification-level" value="secret">
-        <label for="secret">Secret</label>
-      </li>
-      <li>
-        <input id="top-secret" type="radio" name="classification-level" value="top-secret">
-        <label for="top-secret">Top Secret</label>
-      </li>
-    </ul>
-  </fieldset>
-
-
-  <label for="input-service-branch">Primary service branch usage</label>
-  <input id="service-branch" name="service-branch" type="text" placeholder="Add tags associated with service branches">
-
-  <br>
-
-  <fieldset class="usa-fieldset-inputs usa-sans">
-    <label for="input-cloud-model">Cloud model service</label>
-    <ul class="usa-unstyled-list">
-      <li>
-        <input id="iaas" type="radio" name="cloud-level" value="iaas">
-        <label for="iaas">IaaS</label>
-      </li>
-      <li>
-        <input id="paas" type="radio" name="cloud-level" value="paas">
-        <label for="paas">PaaS</label>
-      </li>
-      <li>
-        <input id="iass-pass" type="radio" checked name="cloud-level" value="iass-pass">
-        <label for="iass-pass">Both</label>
-      </li>
-    </ul>
-  </fieldset>
-
-
-
-  <!-- Computation -->
-  <h4 id="application-details">Computation</h4>
-  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
-
-  <label for="">Number of cores</label>
-  <input id="" name="" type="text" placeholder="Total cores">
-
-  <label for="">Total RAM</label>
-  <input id="" name="" type="text" placeholder="Amount of RAM">
-
-
-
-  <!-- Storage -->
-  <h4 id="application-storage">Storage</h4>
-  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
-
-  <label for="">Object storage</label>
-  <input id="" name="" type="text" placeholder="Total object storage">
-
-  <label for="">Server storage</label>
-  <input id="" name="" type="text" placeholder="Total server storage">
-
-
-
-  <!-- Application Usage -->
-  <h4 id="application-usage">Estimated Application Storage</h4>
-  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
-
-  <label for="">Expected active users</label>
-  <input id="" name="" type="text" placeholder="Total active users">
-
-  <label for="">Expected peak concurrent users</label>
-  <input id="" name="" type="text" placeholder="Total peak users">
-
-  <label for="">Expected requests per minute</label>
-  <input id="" name="" type="text" placeholder="Total requests">
-
-  <label for="">Number of application environments</label>
-  <input id="" name="" type="text" placeholder="Total number of environments">
-
-
-
-
-  <br><br>
-
-  <button class="usa-button-secondary">Create Application</button>
-  <br>
-  <button class="usa-button-secondary" disabled>Save &amp; Continue</button>
-
-</form>
-
-
-{% end %}
+{% end %}
\ No newline at end of file
diff --git a/templates/requests/screen-2.html.to b/templates/requests/screen-2.html.to
index a6c67aaf..baa50df0 100644
--- a/templates/requests/screen-2.html.to
+++ b/templates/requests/screen-2.html.to
@@ -1,8 +1,157 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
+<h2>Details of Use</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque placeat distinctio accusamus quo temporibus facilis, dicta delectus asperiores. Nihil aut quod quibusdam id fugit, officia dolorum laudantium! Quidem tempora, aliquam.</p>
+<form>
+  <h3 id="application-details">Application Details</h3>
+  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+
+  <button class="usa-button-secondary usa-button-active">New Application</button>
+  <button class="usa-button-secondary" disabled>Existing Application</button>
+  <button class="usa-button-secondary" disabled>Sandbox Application</button>
+
+
+  <label for="input-application-name">Application name</label>
+  <input id="input-application-name" name="input-application-name" type="text" placeholder="What is the application name?">
+
+  <label for="input-application-description">Application description</label>
+  <textarea id="input-application-description" name="input-application-description" placeholder="Describe the application"></textarea>
+
+  <label for="input-type-textarea">Estimated dollar value of use</label>
+  <input id="dollar-value" name="dollar-value" type="text" placeholder="$">
+
+  <label for="input-estimate">How did you arrive at this estimate?</label>
+  <select name="input-estimate" id="input-estimate">
+    <option value="">- Select -</option>
+    <option value="value1">CSP usage calculator</option>
+    <option value="value2">Option B</option>
+    <option value="value3">Option C</option>
+  </select>
+
+  <fieldset>
+    <label for="input-start-date">Expected start date</label>
+    <div class="usa-date-of-birth">
+      <div class="usa-form-group usa-form-group-month">
+        <label for="date_start_1">Month</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_1" name="date_start_1" type="number" min="1" max="12" value="">
+      </div>
+      <div class="usa-form-group usa-form-group-day">
+        <label for="date_start_2">Day</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_2" name="date_start_2" type="number" min="1" max="31" value="">
+      </div>
+      <div class="usa-form-group usa-form-group-year">
+        <label for="date_start_3">Year</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_3" name="date_start_3" type="number" min="1900" max="2000" value="">
+      </div>
+    </div>
+  </fieldset>
+
+
+  <label for="input-period-performance">Desired period of performance</label>
+  <select name="input-period-performance" id="input-period-performance">
+    <option value="">- Select -</option>
+    <option value="value1">30 days</option>
+    <option value="value2">60 days</option>
+    <option value="value3">90 days</option>
+  </select>
+
+  <br>
+
+  <fieldset class="usa-fieldset-inputs usa-sans">
+    <label for="input-period-performance">Classification level</label>
+    <ul class="usa-unstyled-list">
+      <li>
+        <input id="unclassified" type="radio" checked name="classification-level" value="unclassified">
+        <label for="unclassified">Unclassified</label>
+      </li>
+      <li>
+        <input id="secret" type="radio" name="classification-level" value="secret">
+        <label for="secret">Secret</label>
+      </li>
+      <li>
+        <input id="top-secret" type="radio" name="classification-level" value="top-secret">
+        <label for="top-secret">Top Secret</label>
+      </li>
+    </ul>
+  </fieldset>
+
+
+  <label for="input-service-branch">Primary service branch usage</label>
+  <input id="service-branch" name="service-branch" type="text" placeholder="Add tags associated with service branches">
+
+  <br>
+
+  <fieldset class="usa-fieldset-inputs usa-sans">
+    <label for="input-cloud-model">Cloud model service</label>
+    <ul class="usa-unstyled-list">
+      <li>
+        <input id="iaas" type="radio" name="cloud-level" value="iaas">
+        <label for="iaas">IaaS</label>
+      </li>
+      <li>
+        <input id="paas" type="radio" name="cloud-level" value="paas">
+        <label for="paas">PaaS</label>
+      </li>
+      <li>
+        <input id="iass-pass" type="radio" checked name="cloud-level" value="iass-pass">
+        <label for="iass-pass">Both</label>
+      </li>
+    </ul>
+  </fieldset>
+
+
+
+  <!-- Computation -->
+  <h4 id="application-details">Computation</h4>
+  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+
+  <label for="">Number of cores</label>
+  <input id="" name="" type="text" placeholder="Total cores">
+
+  <label for="">Total RAM</label>
+  <input id="" name="" type="text" placeholder="Amount of RAM">
+
+
+
+  <!-- Storage -->
+  <h4 id="application-storage">Storage</h4>
+  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
+
+  <label for="">Object storage</label>
+  <input id="" name="" type="text" placeholder="Total object storage">
+
+  <label for="">Server storage</label>
+  <input id="" name="" type="text" placeholder="Total server storage">
+
+
+
+  <!-- Application Usage -->
+  <h4 id="application-usage">Estimated Application Storage</h4>
+  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
+
+  <label for="">Expected active users</label>
+  <input id="" name="" type="text" placeholder="Total active users">
+
+  <label for="">Expected peak concurrent users</label>
+  <input id="" name="" type="text" placeholder="Total peak users">
+
+  <label for="">Expected requests per minute</label>
+  <input id="" name="" type="text" placeholder="Total requests">
+
+  <label for="">Number of application environments</label>
+  <input id="" name="" type="text" placeholder="Total number of environments">
+
+
+
+
+  <br><br>
+
+  <button class="usa-button-secondary">Create Application</button>
+  <br>
+  <button class="usa-button-secondary" disabled>Save &amp; Continue</button>
+
+</form>
+
 
-<h2>Organizational Info</h2>
-<input type='textbox'>
 {% end %}
-
diff --git a/templates/requests/screen-3.html.to b/templates/requests/screen-3.html.to
index aed60b90..a6c67aaf 100644
--- a/templates/requests/screen-3.html.to
+++ b/templates/requests/screen-3.html.to
@@ -1,7 +1,8 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-<h2>Funding/Contracting</h2>
+
+<h2>Organizational Info</h2>
 <input type='textbox'>
 {% end %}
 
diff --git a/templates/requests/screen-4.html.to b/templates/requests/screen-4.html.to
index 1e864aee..aed60b90 100644
--- a/templates/requests/screen-4.html.to
+++ b/templates/requests/screen-4.html.to
@@ -1,7 +1,7 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-<h2>Readiness Survey</h2>
+<h2>Funding/Contracting</h2>
 <input type='textbox'>
 {% end %}
 
diff --git a/templates/requests/screen-5.html.to b/templates/requests/screen-5.html.to
index f5298ed9..1e864aee 100644
--- a/templates/requests/screen-5.html.to
+++ b/templates/requests/screen-5.html.to
@@ -1,10 +1,7 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-<h2>Review &amp; Submit</h2>
+<h2>Readiness Survey</h2>
 <input type='textbox'>
 {% end %}
 
-{% block next %}
-<b class='usa-button'>Submit to Contracting Officer</b>
-{% end %}
diff --git a/templates/requests/screen-6.html.to b/templates/requests/screen-6.html.to
new file mode 100644
index 00000000..f5298ed9
--- /dev/null
+++ b/templates/requests/screen-6.html.to
@@ -0,0 +1,10 @@
+{% extends '../requests_new.html.to' %}
+
+{% block form %}
+<h2>Review &amp; Submit</h2>
+<input type='textbox'>
+{% end %}
+
+{% block next %}
+<b class='usa-button'>Submit to Contracting Officer</b>
+{% end %}

From 4f6e2b8d7f552676c5a82fe02979b128d2c1c7c0 Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 11 Jun 2018 16:34:52 -0400
Subject: [PATCH 7/9] Add Organizational Info fields

---
 scss/base/_forms.scss               |  12 ++
 templates/requests/screen-0.html.to |  12 ++
 templates/requests/screen-1.html.to | 157 ++++++++++++++++++++-
 templates/requests/screen-2.html.to | 205 ++++++++++------------------
 templates/requests/screen-3.html.to |   3 +-
 templates/requests/screen-4.html.to |   2 +-
 templates/requests/screen-5.html.to |   5 +-
 templates/requests/screen-6.html.to |  10 --
 8 files changed, 254 insertions(+), 152 deletions(-)
 create mode 100644 templates/requests/screen-0.html.to
 delete mode 100644 templates/requests/screen-6.html.to

diff --git a/scss/base/_forms.scss b/scss/base/_forms.scss
index e69de29b..31f2f705 100644
--- a/scss/base/_forms.scss
+++ b/scss/base/_forms.scss
@@ -0,0 +1,12 @@
+from {
+  margin-bottom: 3rem;
+}
+
+.usa-date-input label {
+  margin-top: 0;
+}
+
+
+.input-label {
+  margin-top: 1rem;
+}
diff --git a/templates/requests/screen-0.html.to b/templates/requests/screen-0.html.to
new file mode 100644
index 00000000..a48e9b63
--- /dev/null
+++ b/templates/requests/screen-0.html.to
@@ -0,0 +1,12 @@
+{% extends '../requests_new.html.to' %}
+
+{% block form %}
+<h2>New JEDI Request</h2>
+
+<p class="usa-font-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus error omnis a, tenetur similique quo officiis voluptates eum recusandae dolorem minus dignissimos, magni consequatur, maxime debitis reprehenderit sint non iusto?</p>
+
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>New Application</a>
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Existing Application</a>
+<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Sandbox Environment</a>
+
+{% end %}
\ No newline at end of file
diff --git a/templates/requests/screen-1.html.to b/templates/requests/screen-1.html.to
index a48e9b63..baa50df0 100644
--- a/templates/requests/screen-1.html.to
+++ b/templates/requests/screen-1.html.to
@@ -1,12 +1,157 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-<h2>New JEDI Request</h2>
+<h2>Details of Use</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque placeat distinctio accusamus quo temporibus facilis, dicta delectus asperiores. Nihil aut quod quibusdam id fugit, officia dolorum laudantium! Quidem tempora, aliquam.</p>
+<form>
+  <h3 id="application-details">Application Details</h3>
+  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
 
-<p class="usa-font-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus error omnis a, tenetur similique quo officiis voluptates eum recusandae dolorem minus dignissimos, magni consequatur, maxime debitis reprehenderit sint non iusto?</p>
+  <button class="usa-button-secondary usa-button-active">New Application</button>
+  <button class="usa-button-secondary" disabled>Existing Application</button>
+  <button class="usa-button-secondary" disabled>Sandbox Application</button>
 
-<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>New Application</a>
-<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Existing Application</a>
-<a class='usa-button usa-button-secondary' href='{{ reverse_url('request_form',next_screen) }}'>Sandbox Environment</a>
 
-{% end %}
\ No newline at end of file
+  <label for="input-application-name">Application name</label>
+  <input id="input-application-name" name="input-application-name" type="text" placeholder="What is the application name?">
+
+  <label for="input-application-description">Application description</label>
+  <textarea id="input-application-description" name="input-application-description" placeholder="Describe the application"></textarea>
+
+  <label for="input-type-textarea">Estimated dollar value of use</label>
+  <input id="dollar-value" name="dollar-value" type="text" placeholder="$">
+
+  <label for="input-estimate">How did you arrive at this estimate?</label>
+  <select name="input-estimate" id="input-estimate">
+    <option value="">- Select -</option>
+    <option value="value1">CSP usage calculator</option>
+    <option value="value2">Option B</option>
+    <option value="value3">Option C</option>
+  </select>
+
+  <fieldset>
+    <label for="input-start-date">Expected start date</label>
+    <div class="usa-date-of-birth">
+      <div class="usa-form-group usa-form-group-month">
+        <label for="date_start_1">Month</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_1" name="date_start_1" type="number" min="1" max="12" value="">
+      </div>
+      <div class="usa-form-group usa-form-group-day">
+        <label for="date_start_2">Day</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_2" name="date_start_2" type="number" min="1" max="31" value="">
+      </div>
+      <div class="usa-form-group usa-form-group-year">
+        <label for="date_start_3">Year</label>
+        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_3" name="date_start_3" type="number" min="1900" max="2000" value="">
+      </div>
+    </div>
+  </fieldset>
+
+
+  <label for="input-period-performance">Desired period of performance</label>
+  <select name="input-period-performance" id="input-period-performance">
+    <option value="">- Select -</option>
+    <option value="value1">30 days</option>
+    <option value="value2">60 days</option>
+    <option value="value3">90 days</option>
+  </select>
+
+  <br>
+
+  <fieldset class="usa-fieldset-inputs usa-sans">
+    <label for="input-period-performance">Classification level</label>
+    <ul class="usa-unstyled-list">
+      <li>
+        <input id="unclassified" type="radio" checked name="classification-level" value="unclassified">
+        <label for="unclassified">Unclassified</label>
+      </li>
+      <li>
+        <input id="secret" type="radio" name="classification-level" value="secret">
+        <label for="secret">Secret</label>
+      </li>
+      <li>
+        <input id="top-secret" type="radio" name="classification-level" value="top-secret">
+        <label for="top-secret">Top Secret</label>
+      </li>
+    </ul>
+  </fieldset>
+
+
+  <label for="input-service-branch">Primary service branch usage</label>
+  <input id="service-branch" name="service-branch" type="text" placeholder="Add tags associated with service branches">
+
+  <br>
+
+  <fieldset class="usa-fieldset-inputs usa-sans">
+    <label for="input-cloud-model">Cloud model service</label>
+    <ul class="usa-unstyled-list">
+      <li>
+        <input id="iaas" type="radio" name="cloud-level" value="iaas">
+        <label for="iaas">IaaS</label>
+      </li>
+      <li>
+        <input id="paas" type="radio" name="cloud-level" value="paas">
+        <label for="paas">PaaS</label>
+      </li>
+      <li>
+        <input id="iass-pass" type="radio" checked name="cloud-level" value="iass-pass">
+        <label for="iass-pass">Both</label>
+      </li>
+    </ul>
+  </fieldset>
+
+
+
+  <!-- Computation -->
+  <h4 id="application-details">Computation</h4>
+  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+
+  <label for="">Number of cores</label>
+  <input id="" name="" type="text" placeholder="Total cores">
+
+  <label for="">Total RAM</label>
+  <input id="" name="" type="text" placeholder="Amount of RAM">
+
+
+
+  <!-- Storage -->
+  <h4 id="application-storage">Storage</h4>
+  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
+
+  <label for="">Object storage</label>
+  <input id="" name="" type="text" placeholder="Total object storage">
+
+  <label for="">Server storage</label>
+  <input id="" name="" type="text" placeholder="Total server storage">
+
+
+
+  <!-- Application Usage -->
+  <h4 id="application-usage">Estimated Application Storage</h4>
+  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
+
+  <label for="">Expected active users</label>
+  <input id="" name="" type="text" placeholder="Total active users">
+
+  <label for="">Expected peak concurrent users</label>
+  <input id="" name="" type="text" placeholder="Total peak users">
+
+  <label for="">Expected requests per minute</label>
+  <input id="" name="" type="text" placeholder="Total requests">
+
+  <label for="">Number of application environments</label>
+  <input id="" name="" type="text" placeholder="Total number of environments">
+
+
+
+
+  <br><br>
+
+  <button class="usa-button-secondary">Create Application</button>
+  <br>
+  <button class="usa-button-secondary" disabled>Save &amp; Continue</button>
+
+</form>
+
+
+{% end %}
diff --git a/templates/requests/screen-2.html.to b/templates/requests/screen-2.html.to
index baa50df0..26f60a93 100644
--- a/templates/requests/screen-2.html.to
+++ b/templates/requests/screen-2.html.to
@@ -1,157 +1,98 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-<h2>Details of Use</h2>
+
+
+<h2>Organizational Info</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque placeat distinctio accusamus quo temporibus facilis, dicta delectus asperiores. Nihil aut quod quibusdam id fugit, officia dolorum laudantium! Quidem tempora, aliquam.</p>
+
+<h3>Information About You</h3>
+
+
+
+
 <form>
-  <h3 id="application-details">Application Details</h3>
-  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+  <label for="">Name</label>
+  <input id="" name="" type="text">
 
-  <button class="usa-button-secondary usa-button-active">New Application</button>
-  <button class="usa-button-secondary" disabled>Existing Application</button>
-  <button class="usa-button-secondary" disabled>Sandbox Application</button>
+  <label for="">Email</label>
+  <input id="" name="" type="email" placeholder="i.e. name@mail.gov">
 
+  <label for="">Phone Number</label>
+  <input id="" name="" type="text" placeholder="i.e. (123) 456-7890">
 
-  <label for="input-application-name">Application name</label>
-  <input id="input-application-name" name="input-application-name" type="text" placeholder="What is the application name?">
-
-  <label for="input-application-description">Application description</label>
-  <textarea id="input-application-description" name="input-application-description" placeholder="Describe the application"></textarea>
-
-  <label for="input-type-textarea">Estimated dollar value of use</label>
-  <input id="dollar-value" name="dollar-value" type="text" placeholder="$">
-
-  <label for="input-estimate">How did you arrive at this estimate?</label>
-  <select name="input-estimate" id="input-estimate">
-    <option value="">- Select -</option>
-    <option value="value1">CSP usage calculator</option>
-    <option value="value2">Option B</option>
-    <option value="value3">Option C</option>
-  </select>
+  <label for="">Office Symbol / Department</label>
+  <input id="" name="" type="text" placeholder="i.e. Army PEO-EIS">
 
   <fieldset>
-    <label for="input-start-date">Expected start date</label>
-    <div class="usa-date-of-birth">
+    <label for="">Citizenship</label>
+    <ul class="usa-unstyled-list">
+      <li>
+        <input id="" type="radio" name="" value"">
+        <label class="input-label">United States</label>
+      </li>
+      <li>
+        <input id="" type="radio" name="" value"">
+        <label class="input-label">Foreign National</label>
+      </li>
+      <li>
+        <input id="" type="radio" name="" value"">
+        <label class="input-label">Other</label>
+      </li>
+    </ul>
+  </fieldset>
+
+  <fieldset>
+    <label for="">Designation of Person</label>
+    <ul class="usa-unstyled-list">
+      <li>
+        <input id="" type="radio" name="" value"">
+        <label class="input-label">Military</label>
+      </li>
+      <li>
+        <input id="" type="radio" name="" value"">
+        <label class="input-label">Civilian</label>
+      </li>
+      <li>
+        <input id="" type="radio" name="" value"">
+        <label class="input-label">Contractor</label>
+      </li>
+    </ul>
+  </fieldset>
+  
+  
+
+  <fieldset>
+    <label for="">Latest IA Training completion date</label>
+
+    <div class="usa-date-input">
       <div class="usa-form-group usa-form-group-month">
-        <label for="date_start_1">Month</label>
-        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_1" name="date_start_1" type="number" min="1" max="12" value="">
+        <label for="">Month</label>
+        <input class="usa-input-inline" id="" name="" type="number" min="1" max="12" value="">
       </div>
       <div class="usa-form-group usa-form-group-day">
-        <label for="date_start_2">Day</label>
-        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_2" name="date_start_2" type="number" min="1" max="31" value="">
+        <label for="">Day</label>
+        <input class="usa-input-inline" id="" name="" type="number" min="1" max="31" value="">
       </div>
       <div class="usa-form-group usa-form-group-year">
-        <label for="date_start_3">Year</label>
-        <input class="usa-input-inline" aria-describedby="dobHint" id="date_start_3" name="date_start_3" type="number" min="1900" max="2000" value="">
+        <label for="">Year</label>
+        <input class="usa-input-inline" id="" name="" type="number" min="1900" max="2000" value="">
       </div>
     </div>
   </fieldset>
 
+</form>
 
-  <label for="input-period-performance">Desired period of performance</label>
-  <select name="input-period-performance" id="input-period-performance">
-    <option value="">- Select -</option>
-    <option value="value1">30 days</option>
-    <option value="value2">60 days</option>
-    <option value="value3">90 days</option>
-  </select>
+<h3>Information About Your Collaborators</h3>
+<form>
+  <p>Please designate a Contracting Officer that will help you complete this process.</p>
+  <label for="">Name</label>
+  <input id="" name="" type="text">
 
-  <br>
-
-  <fieldset class="usa-fieldset-inputs usa-sans">
-    <label for="input-period-performance">Classification level</label>
-    <ul class="usa-unstyled-list">
-      <li>
-        <input id="unclassified" type="radio" checked name="classification-level" value="unclassified">
-        <label for="unclassified">Unclassified</label>
-      </li>
-      <li>
-        <input id="secret" type="radio" name="classification-level" value="secret">
-        <label for="secret">Secret</label>
-      </li>
-      <li>
-        <input id="top-secret" type="radio" name="classification-level" value="top-secret">
-        <label for="top-secret">Top Secret</label>
-      </li>
-    </ul>
-  </fieldset>
-
-
-  <label for="input-service-branch">Primary service branch usage</label>
-  <input id="service-branch" name="service-branch" type="text" placeholder="Add tags associated with service branches">
-
-  <br>
-
-  <fieldset class="usa-fieldset-inputs usa-sans">
-    <label for="input-cloud-model">Cloud model service</label>
-    <ul class="usa-unstyled-list">
-      <li>
-        <input id="iaas" type="radio" name="cloud-level" value="iaas">
-        <label for="iaas">IaaS</label>
-      </li>
-      <li>
-        <input id="paas" type="radio" name="cloud-level" value="paas">
-        <label for="paas">PaaS</label>
-      </li>
-      <li>
-        <input id="iass-pass" type="radio" checked name="cloud-level" value="iass-pass">
-        <label for="iass-pass">Both</label>
-      </li>
-    </ul>
-  </fieldset>
-
-
-
-  <!-- Computation -->
-  <h4 id="application-details">Computation</h4>
-  <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
-
-  <label for="">Number of cores</label>
-  <input id="" name="" type="text" placeholder="Total cores">
-
-  <label for="">Total RAM</label>
-  <input id="" name="" type="text" placeholder="Amount of RAM">
-
-
-
-  <!-- Storage -->
-  <h4 id="application-storage">Storage</h4>
-  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
-
-  <label for="">Object storage</label>
-  <input id="" name="" type="text" placeholder="Total object storage">
-
-  <label for="">Server storage</label>
-  <input id="" name="" type="text" placeholder="Total server storage">
-
-
-
-  <!-- Application Usage -->
-  <h4 id="application-usage">Estimated Application Storage</h4>
-  <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
-
-  <label for="">Expected active users</label>
-  <input id="" name="" type="text" placeholder="Total active users">
-
-  <label for="">Expected peak concurrent users</label>
-  <input id="" name="" type="text" placeholder="Total peak users">
-
-  <label for="">Expected requests per minute</label>
-  <input id="" name="" type="text" placeholder="Total requests">
-
-  <label for="">Number of application environments</label>
-  <input id="" name="" type="text" placeholder="Total number of environments">
-
-
-
-
-  <br><br>
-
-  <button class="usa-button-secondary">Create Application</button>
-  <br>
-  <button class="usa-button-secondary" disabled>Save &amp; Continue</button>
+  <label for="">Email</label>
+  <input id="" name="" type="text" placeholder="i.e. name@mail.gov">
 
 </form>
 
-
 {% end %}
+
diff --git a/templates/requests/screen-3.html.to b/templates/requests/screen-3.html.to
index a6c67aaf..aed60b90 100644
--- a/templates/requests/screen-3.html.to
+++ b/templates/requests/screen-3.html.to
@@ -1,8 +1,7 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-
-<h2>Organizational Info</h2>
+<h2>Funding/Contracting</h2>
 <input type='textbox'>
 {% end %}
 
diff --git a/templates/requests/screen-4.html.to b/templates/requests/screen-4.html.to
index aed60b90..1e864aee 100644
--- a/templates/requests/screen-4.html.to
+++ b/templates/requests/screen-4.html.to
@@ -1,7 +1,7 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-<h2>Funding/Contracting</h2>
+<h2>Readiness Survey</h2>
 <input type='textbox'>
 {% end %}
 
diff --git a/templates/requests/screen-5.html.to b/templates/requests/screen-5.html.to
index 1e864aee..f5298ed9 100644
--- a/templates/requests/screen-5.html.to
+++ b/templates/requests/screen-5.html.to
@@ -1,7 +1,10 @@
 {% extends '../requests_new.html.to' %}
 
 {% block form %}
-<h2>Readiness Survey</h2>
+<h2>Review &amp; Submit</h2>
 <input type='textbox'>
 {% end %}
 
+{% block next %}
+<b class='usa-button'>Submit to Contracting Officer</b>
+{% end %}
diff --git a/templates/requests/screen-6.html.to b/templates/requests/screen-6.html.to
deleted file mode 100644
index f5298ed9..00000000
--- a/templates/requests/screen-6.html.to
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends '../requests_new.html.to' %}
-
-{% block form %}
-<h2>Review &amp; Submit</h2>
-<input type='textbox'>
-{% end %}
-
-{% block next %}
-<b class='usa-button'>Submit to Contracting Officer</b>
-{% end %}

From 734f34b12d8ef8d352116d5eb9b8eb2463e1172b Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 11 Jun 2018 16:47:02 -0400
Subject: [PATCH 8/9] Add IDs for sidenav and headings

---
 templates/nav-side.html.to          | 11 ++++++++++-
 templates/requests/screen-2.html.to |  7 ++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/templates/nav-side.html.to b/templates/nav-side.html.to
index 2c727ada..547ee714 100644
--- a/templates/nav-side.html.to
+++ b/templates/nav-side.html.to
@@ -1,7 +1,7 @@
 <aside class="usa-width-one-fourth usa-layout-docs-sidenav">
   <ul class="usa-sidenav-list">
     <li>
-      <a class="usa-current" href="#details-of-use">1. Details of Use</a>
+      <a href="#details-of-use">1. Details of Use</a>
       <ul class="usa-sidenav-sub_list">
         <li>
           <a href="#application-details">Application Details</a>
@@ -17,7 +17,16 @@
 
     <li>
       <a href="#">2. Organizational Info</a>
+      <ul class="usa-sidenav-sub_list">
+        <li>
+          <a href="#information-about-you">Information About You</a>
+        </li>
+        <li>
+          <a href="#information-about-your-collaborators">Information About Your Collaborators</a>
+        </li>
+      </ul>
     </li>
+
     <li>
       <a href="#">3. Funding/Contracting</a>
     </li>
diff --git a/templates/requests/screen-2.html.to b/templates/requests/screen-2.html.to
index 26f60a93..8b0847ae 100644
--- a/templates/requests/screen-2.html.to
+++ b/templates/requests/screen-2.html.to
@@ -6,10 +6,7 @@
 <h2>Organizational Info</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque placeat distinctio accusamus quo temporibus facilis, dicta delectus asperiores. Nihil aut quod quibusdam id fugit, officia dolorum laudantium! Quidem tempora, aliquam.</p>
 
-<h3>Information About You</h3>
-
-
-
+<h3 id="information-about-you">Information About You</h3>
 
 <form>
   <label for="">Name</label>
@@ -83,7 +80,7 @@
 
 </form>
 
-<h3>Information About Your Collaborators</h3>
+<h3 id="information-about-your-collaborators">Information About Your Collaborators</h3>
 <form>
   <p>Please designate a Contracting Officer that will help you complete this process.</p>
   <label for="">Name</label>

From 8a7ce8a5dce939d5c1a0836586843780600551c4 Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Tue, 12 Jun 2018 10:43:19 -0400
Subject: [PATCH 9/9] Add review and submit markup, clean up some file

---
 scss/base/_typography.scss          |   4 +
 templates/calculator.html.to        |   2 +-
 templates/home.html.to              |   2 +-
 templates/login.html.to             |   2 +-
 templates/reports.html.to           |   2 +-
 templates/requests.html.to          |   2 +-
 templates/requests/screen-5.html.to | 196 +++++++++++++++++++++++++++-
 templates/users.html.to             |   2 +-
 templates/workspaces.html.to        |   2 +-
 9 files changed, 205 insertions(+), 9 deletions(-)

diff --git a/scss/base/_typography.scss b/scss/base/_typography.scss
index 29833e78..943bd060 100644
--- a/scss/base/_typography.scss
+++ b/scss/base/_typography.scss
@@ -11,4 +11,8 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   margin-top: 0.5em;
+}
+
+label {
+  font-style: italic;
 }
\ No newline at end of file
diff --git a/templates/calculator.html.to b/templates/calculator.html.to
index 2129ba27..bf19f0a5 100644
--- a/templates/calculator.html.to
+++ b/templates/calculator.html.to
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<main class="usa-section usa-content" id="main-content">
+<main class="usa-section usa-content">
 
 <h1>Calculator</h1>
 
diff --git a/templates/home.html.to b/templates/home.html.to
index 85e4a235..4003234c 100644
--- a/templates/home.html.to
+++ b/templates/home.html.to
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<main class="usa-section usa-content" id="main-content">
+<main class="usa-section usa-content">
 
 <h1>Home</h1>
 
diff --git a/templates/login.html.to b/templates/login.html.to
index 99e5ca57..9a5a67ed 100644
--- a/templates/login.html.to
+++ b/templates/login.html.to
@@ -11,7 +11,7 @@
 </head>
 <body>
 
-<main class="usa-grid-full usa-section login-area" id="main-content">
+<main class="usa-grid-full usa-section login-area">
 
   <img class="logo-img" src="/static/img/logo-alt.png" alt="Defense Digital Service Logo">
 
diff --git a/templates/reports.html.to b/templates/reports.html.to
index ed20dbf5..4cfebd3e 100644
--- a/templates/reports.html.to
+++ b/templates/reports.html.to
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<main class="usa-section usa-content" id="main-content">
+<main class="usa-section usa-content">
 
 <h1>Reports</h1>
 
diff --git a/templates/requests.html.to b/templates/requests.html.to
index 6fb11d8c..0c5fe1cf 100644
--- a/templates/requests.html.to
+++ b/templates/requests.html.to
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<main class="usa-section usa-content" id="main-content">
+<main class="usa-section usa-content">
 
   <h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1>
 
diff --git a/templates/requests/screen-5.html.to b/templates/requests/screen-5.html.to
index f5298ed9..8b3f7190 100644
--- a/templates/requests/screen-5.html.to
+++ b/templates/requests/screen-5.html.to
@@ -2,9 +2,201 @@
 
 {% block form %}
 <h2>Review &amp; Submit</h2>
-<input type='textbox'>
+<p class="usa-font-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae placeat maiores illo totam consequuntur ipsum quo animi earum voluptatem, velit minus, perferendis aperiam, tenetur alias nemo ratione accusantium, ullam at!</p>
+
+
+<h3>1. Details of Use <a href="" class="usa-button usa-button-secondary">Edit</a></h3>
+
+
+<h4>Applications &amp; Environments (2)</h4>
+<table class="usa-table-borderless" width="100%">
+  <thead>
+    <tr>
+      <th scope="col">Application Name</th>
+      <th scope="col">Total Users</th>
+      <th scope="col">Estimated Cost</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><a href="#app-code-mil">Code.mil</a></td>
+      <td>235</td>
+      <td>$1,000,000,000</td>
+    </tr>
+    <tr>
+      <td><a href="#app-digital-dojo">Digital Dojo</a></td>
+      <td>1,337</td>
+      <td>$10,000</td>
+    </tr>
+  </tbody>
+</table>
+
+<h5 id="app-code-mil">Code.mil</h5>
+
+<h6>Application Details</h6>
+<label>Application description</label>
+<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore tempora provident labore, deleniti facilis dolorum impedit repellat, et, quisquam modi eos libero nulla ut excepturi omnis. At magnam assumenda vero.</span>
+
+<label>Estimated dollar value of use</label>
+<span>$1,000,000,000</span>
+
+<label>How did you arrive at this estimate?</label>
+<span>CSP Calculator</span>
+
+<label>Expected start date</label>
+<span>2020-03-02</span>
+
+<label>Desired period of performance</label>
+<span>Lots of it</span>
+
+<label>Classification level</label>
+<span>Secret</span>
+
+<label>Primary service branch usage</label>
+<span>Army</span>
+
+<label>Cloud model service</label>
+<span>IaaS and PaaS</span>
+
+<h6>Computation</h6>
+<label>Number of cores</label>
+<span>32</span>
+
+<label>Total RAM</label>
+<span>128GB</span>
+
+<h6>Storage</h6>
+<label>Object storage</label>
+<span>10TB</span>
+
+<label>Server storage</label>
+<span>100TB</span>
+
+<h6>Estimated Application Storage</h6>
+<label>Expected active users</label>
+<span>300</span>
+
+<label>Expected peak concurrent users</label>
+<span>1,000</span>
+
+<label>Expected requests per minute</label>
+<span>1,000</span>
+
+<label>Number of application environments</label>
+<span>3</span>
+
+
+<h5 id="app-digital-dojo">Digital Dojo</h5>
+
+<h6>Application Details</h6>
+<label>Application description</label>
+<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore tempora provident labore, deleniti facilis dolorum impedit repellat, et, quisquam modi eos libero nulla ut excepturi omnis. At magnam assumenda vero.</span>
+
+<label>Estimated dollar value of use</label>
+<span>$10,000</span>
+
+<label>How did you arrive at this estimate?</label>
+<span>CSP Calculator</span>
+
+<label>Expected start date</label>
+<span>2020-03-02</span>
+
+<label>Desired period of performance</label>
+<span>Lots of it</span>
+
+<label>Classification level</label>
+<span>Secret</span>
+
+<label>Primary service branch usage</label>
+<span>Army</span>
+
+<label>Cloud model service</label>
+<span>IaaS and PaaS</span>
+
+<h6>Computation</h6>
+<label>Number of cores</label>
+<span>32</span>
+
+<label>Total RAM</label>
+<span>128GB</span>
+
+<h6>Storage</h6>
+<label>Object storage</label>
+<span>10TB</span>
+
+<label>Server storage</label>
+<span>100TB</span>
+
+<h6>Estimated Application Storage</h6>
+<label>Expected active users</label>
+<span>300</span>
+
+<label>Expected peak concurrent users</label>
+<span>1,000</span>
+
+<label>Expected requests per minute</label>
+<span>1,000</span>
+
+<label>Number of application environments</label>
+<span>3</span>
+
+
+<h3>2. Organizational Info <a href="" class="usa-button usa-button-secondary">Edit</a></h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint qui rem molestiae officia vitae quas error ut, est commodi quo! Error itaque earum, facere quod dolore qui beatae repudiandae accusantium.</p>
+<h4>Information About Requester</h4>
+
+
+<label>Name</label>
+<span>Friedrich Straat</span>
+
+<label>Email</label>
+<span>fstraat@mail.gov</span>
+
+<label>Phone Number</label>
+<span>(123) 456-7890</span>
+
+<label>Office Symbol / Department</label>
+<span>Army</span>
+
+
+<label>Citizenship</label>
+<span>United States</span>
+
+
+<label>Designation of Person</label>
+<span>Military</span>
+
+
+<label>Latest IA Training completion date</label>
+<span>2018-04-12</span>
+
+
+<h4>Information About Collaborators</h4>
+
+<label>Name</label>
+<span>Pietro Quirinis</span>
+
+<label>Email</label>
+<span>quirinis@mail.gov</span>
+
+
+
+<h3>3. Funding &amp; Contracting <a href="" class="usa-button usa-button-secondary">Edit</a></h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse inventore non illo quibusdam tempora vero temporibus reprehenderit sapiente cumque enim quaerat fuga praesentium nemo vel, expedita numquam sequi sed iusto!</p>
+
+
+
+
+
+
+
+<br><br>
+
+
 {% end %}
 
 {% block next %}
-<b class='usa-button'>Submit to Contracting Officer</b>
+<a class='usa-button'>Submit</a>
 {% end %}
diff --git a/templates/users.html.to b/templates/users.html.to
index 11395772..ee050f69 100644
--- a/templates/users.html.to
+++ b/templates/users.html.to
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<main class="usa-section usa-content" id="main-content">
+<main class="usa-section usa-content">
 
 <h1>Users</h1>
 
diff --git a/templates/workspaces.html.to b/templates/workspaces.html.to
index 17167397..c768708c 100644
--- a/templates/workspaces.html.to
+++ b/templates/workspaces.html.to
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<main class="usa-section usa-content usa-width-one-whole" id="main-content">
+<main class="usa-section usa-content usa-width-one-whole">
 
   <h1>Workspaces</h1>