Add sidebar navigation and placeholder text

scss/atat.scss

@@ -1,2 +1,2 @@
-@import 'variables.scss';
 @import '../node_modules/uswds/src/stylesheets/uswds.scss';
+@import 'variables.scss';

scss/variables.scss

@@ -1 +0,0 @@
-

templates/header.html.to

@@ -11,7 +11,7 @@
     <nav role="navigation" class="usa-nav">
       <ul class="usa-nav-primary usa-accordion">
         <li><a class="usa-nav-link" href="#"><span>Home</span></a></li>
-        <li><a class="usa-nav-link" href="#"><span>JEDI Requests</span></a></li>
+        <li><a class="usa-nav-link usa-current" href="#"><span>JEDI Requests</span></a></li>
         <li><a class="usa-nav-link" href="#"><span>Users</span></a></li>
         <li><a class="usa-nav-link" href="#"><span>Reports</span></a></li>
         <li><a class="usa-nav-link" href="#"><span>Usage Calculator</span></a></li>

templates/hello.html.to

@@ -1,11 +1,66 @@
 {% extends "base.html.to" %}
 
 {% block title %}
-hello
+AT-AT
 {% end %}
 
 {% block content %}
-<h1>Hello!</h1>
+
-is it me you're looking for?
+<main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
+
+  <h1>New JEDI Request</h1><br>
+
+  <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>
+        <ul class="usa-sidenav-sub_list">
+          <li>
+            <a href="#application-details">Application Details</a>
+          </li>
+          <li>
+            <a href="#application-computation">Computation</a>
+          </li>
+          <li>
+            <a href="#application-storage">Storage</a>
+          </li>
+        </ul>
+      </li>
+
+      <li>
+        <a href="#">2. Organizational Info</a>
+      </li>
+      <li>
+        <a href="#">3. Funding/Contracting</a>
+      </li>
+      <li>
+        <a href="#">4. Readiness Survey</a>
+      </li>
+      <li>
+        <a href="#">5. Review &amp; Submit</a>
+      </li>      
+    </ul>
+  </aside>
+
+  <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>
+
+    <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>
+    
+    <h3 id="application-details">Computation</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>
+
+    <h3 id="application-storage">Storage</h3>
+    <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>
+    <p>Keep each section and subsection focused — a good approach is to include one theme (topic) per section.</p>
+
+  </div>
+</main>
+
+
 {% end %}