About section

client/src/App.js

@@ -206,7 +206,7 @@ class App extends Component {
             >
               next
             </button>
-            <footer class="footer">
+            <footer>
               <div class="btn-change">
                 <Change />
               </div>

client/src/assets/stylesheets/main.scss

@@ -6,4 +6,6 @@
 @import "base/helpers";
 @import "components/App";
 @import "components/Header";
-@import "components/form";
+@import "components/form";
+
+@import "pages/CaseStudy";

client/src/assets/stylesheets/pages/CaseStudy.scss

@@ -0,0 +1,45 @@
+.study {
+  margin: 2rem auto;
+  font-size: 1.5rem;
+  text-align: center;
+  > h1 {
+    margin-bottom: 3rem;
+  }
+
+  > h3 {
+    margin-bottom: 1rem;
+    text-decoration: underline;
+  }
+
+  &__list {
+    text-align: left;
+    list-style-type: disc;
+
+    > li {
+      margin-bottom: 1rem;
+    }
+  }
+
+  &__actions {
+    margin-top: 1rem;
+    text-align: left;
+  }
+
+  p {
+    text-align: justify;
+    margin-bottom: 3rem;
+    font-size: 1.25rem;
+  }
+
+  img {
+    width: 50%;
+  }
+
+  > div {
+    font-size: 0.9rem;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+}

client/src/components/body/about.js

@@ -23,13 +23,15 @@ const About = ({ title, description, links }) => {
           </div>
         </div>
       </section>
-      <div class="row">
+      <div class="study">
+      <p>
         In this lab, you will learn about why it is important to create software
         that is accessible to users with dexterity impairments.
         You will learn about issues related to dexterity,
         increase your understanding through an interactive module about
         dexterity impairments, watch related videos,
         and take a quiz to test your knowledge. Click "Next" to start!
+      </p>
       </div>
     </div>
   );

client/src/components/body/reading.js

@@ -23,7 +23,7 @@ const Reading = ({ title, description, links }) => {
           </div>
         </div>
       </section>
-      <div class="row">
+      <div>
         Reading that discusses the topic, how it affects people, how often it
         occers, etc.
       </div>

client/src/css/style.css

@@ -97,17 +97,18 @@ h2{
   border-color: #fed136;
   color: #404040;
   float: right;
-  margin: 20px;
   padding: 8px !important;
 }
 .back {
   background-color: #404040;
   border-color: #404040;
   color: white;
   float: left;
-  margin: 20px;
   padding: 8px !important;
 }
+.back, .next{
+  margin-bottom:10px;
+}
 .hidden {
   display: none;
 }