added sidebar items and card css

design/about.css

@@ -5,12 +5,13 @@ html, body {
 .container {
   max-width: 80em;
   margin: 1em auto;
+  padding: 0 1em;
 }
 
 /* Header Styles */
 
 .header {
-  padding: 1em;
+  padding: 2em 0 1em 0;
   width: 100%;
   
   color: white;
@@ -84,10 +85,33 @@ html, body {
 .cards {
   display: flex;
   justify-content: space-between;
+
+  margin-top: 1em; /* Spacing Between Navbar */
 }
 
 .card {
   width: 30%;
+  
+  border: 1px solid #555;
+  border-radius: 4px;
+
+  box-shadow: 2px 2px 3px #BBB;
+}
+
+.card:hover {
+  box-shadow: 3px 3px 3px #888;
+}
+
+
+.card-content {
+  margin: 1em;
+  text-align: center;
+}
+
+.caret {
+  width: 100%;
+  color: #298BDF;
+  font-size: 2em;
 }
 
 /* Breaking Styles */
@@ -110,4 +134,37 @@ html, body {
 
 .text {
     width: 75%;
+}
+
+/* Sidebar */
+
+.sidebar ul {
+  list-style: none;
+  float: right;
+  margin: 0;
+}
+
+.sidebar ul li {
+  border: 1px solid #145289;
+  border-radius: 4px;
+
+  padding: 0.5em;
+  margin-bottom: 0.5em;
+  
+  background-color: white;
+  color: #145289;
+
+  display: block;
+}
+
+.sidebar ul li.active {
+  background-color: #298BDF;
+  color: white;
+}
+
+.sidebar h2 {
+  color: #145289;
+  text-align: right;
+  float: right;
+  width: 100%;
 }
\ No newline at end of file

design/about.haml

@@ -32,30 +32,33 @@
 
             .cards
                 .card
-                    %img
-                    %h1 Card 1
-                    %h2 About Card 1
-                    .caret
+                    .card-content
+                        %h1 Card 1
+                        %p About Card 1
+                        .caret
+                            <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
 
                 .card
-                    %img
-                    %h1 Card 2
-                    %h2 About Card 2
-                    .caret
+                    .card-content
+                        %h1 Card 2
+                        %p About Card 2
+                        .caret
+                            <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
 
                 .card
-                    %img
-                    %h1 Card 3
-                    %h2 About Card 3
-                    .caret
-
+                    .card-content
+                        %h1 Card 3
+                        %p About Card 3
+                        .caret
+                            <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
+                    
             .break
 
             .content
                 .sidebar
                     %h2 Card 1
                     %ul
-                        %li Item 1
+                        %li.active Item 1
                         %li Item 2
                         %li Item 3