Update layout

styles/sections/_home.scss

@@ -2,11 +2,22 @@
   display: block;
   background-color: $color-white;
 
+
   .home-container {
     max-width: 70rem;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 8rem;
+    padding-right: $gap * 4;
+    padding-left: $gap * 4;
+
+    h1 {
+      font-weight: 200;
+    }
+
+    h2, h4 {
+      color: $color-blue;
+    }
 
     .home-container__logo {
       display: block;
@@ -14,6 +25,14 @@
       margin: $gap * 2;
     }
 
+    .home-container__list {
+
+      ol {
+        list-style: none;
+        counter-reset: li;
+        color: red;}
       }
 
-}
+    }
+
+  }

templates/base.html

@@ -14,6 +14,17 @@
 
   <div id='app-root'>
 
+    <div class="usa-banner-header">
+      <div class="usa-grid usa-banner-inner">
+        <img src="static/img/us_flag.png" alt="U.S. flag">
+        <p>An official website of the United States government</p>
+        <button class="usa-accordion-button usa-banner-button" aria-expanded="false" aria-controls="gov-banner">
+          <span class="usa-banner-button-text">Here’s how you know</span>
+        </button>
+      </div>
+    </div>
+
+
     {% block template_vars %}{% endblock %}
 
     {% include 'navigation/topbar.html' %}

templates/jedi.html

@@ -3,50 +3,64 @@
 {% block content %}
 
 <section class="home-layout">
+  <div class="row">
+    <div class="col">
       <div class="home-container">
 
+        <section>
           <img class="home-container__logo" src="/static/img/ccpo-logo.svg" alt="Cloud Computing Program Office Logo">
-
           <h1>Joint Enterprise Defense Infrastructure (JEDI) Cloud</h1>
           <p>
             JEDI Cloud provides commercial Infrastructure as a Service (IaaS) and Platform as a Service (PaaS) offerings to support DoD business and mission operations.<br>
             <b>Anyone with a DoD mission may use JEDI</b>.
           </p>
           <a class="usa-button" href="login"><span>New JEDI Request</span></a>
+        </section>
 
+        <section>
           <h2>Five Steps to the JEDI Cloud</h2>
           <p>Approval to use JEDI can be granted in hours once a task order has been created and financial verification provided. Follow the five steps below:</p>
 
-    <ol>
+          <ul>
             <li>
-        <div>Complete a JEDI Cloud access request</div>
+              <h4>Complete a JEDI Cloud access request</h4>
+              {{ Icon('ok') }}
               <p>
                 A JEDI Cloud Access Request will inform the the Cloud Computing Program Office (CCPO) about your intention to use JEDI's commercial cloud services and provide the preliminary information needed to grant access.
                 Any DoD employee with a CAC may initiate this request. <a class="icon-link" href="login">Start a Request</a>
               </p>
-        {{ Icon('ok') }}
             </li>
             <li>
-        <div>Prepare a Task Order</div>
-        <p>After submitting a JEDI Cloud Access Request, you will need to work with a contracting officer to prepare a Task Order. The JEDI Cloud is offered by the Department of Defense through an Indefinite Delivery/Indefinite Quantity (ID/IQ) contract vehicle which allows for organizations to quickly order commercial cloud services.</p>
               {{ Icon('document') }}
+              <h4>Prepare a Task Order</h4>
+
+              <p>After submitting a JEDI Cloud Access Request, you will need to work with a contracting officer to prepare a Task Order. The JEDI Cloud is offered by the Department of Defense through an Indefinite Delivery/Indefinite Quantity (ID/IQ) contract vehicle which allows for organizations to quickly order commercial cloud services.</p>
             </li>
             <li>
-        <div>Complete Financial Verfication</div>
+              <h4>Complete Financial Verfication</h4>
-        <p>After your Task Order is approved you must add that information to your JEDI Cloud Access Request for financial verification.</p>
               {{ Icon('briefcase') }}
+              <p>After your Task Order is approved you must add that information to your JEDI Cloud Access Request for financial verification.</p>
             </li>
             <li>
-        <div>Designate Workspace Users</div>
+              <h4>Designate Workspace Users</h4>
-        <p>Once your JEDI Cloud Access Request is approved by the CCPO the workspace owner will need to set up projects, environments, and users. The workspace owner is the technical POC you originally designated on the request.</p>
               {{ Icon('avatar') }}
+              <p>Once your JEDI Cloud Access Request is approved by the CCPO the workspace owner will need to set up projects, environments, and users. The workspace owner is the technical POC you originally designated on the request.</p>
             </li>
             <li>
-        <div>Use JEDI Cloud</div>
+              <h4>Use JEDI Cloud</h4>
-        <p>Users you grant access can log into this site, the Account Tracking and Automation Tool (AT-AT), in order to log in directly to the Cloud Service Provider's portal and use cloud resources.</p>
               {{ Icon('cloud') }}
+              <p>Users you grant access can log into this site, the Account Tracking and Automation Tool (AT-AT), in order to log in directly to the Cloud Service Provider's portal and use cloud resources.</p>
             </li>
-    </ol>
+          </ul>
+
+        </section>
+
+      </div>
+
+    </div>
+
+
+
 
   </div>
 </section>