CSS rules for background colors

src/layouts/index.html

@@ -14,4 +14,8 @@
   </div>
   {{- partial "full-width-cta.html" . -}}
 </section>
+
+<section>
+  
+</section>
 {{ end }}

src/static/css/style.css

@@ -44,37 +44,73 @@ div.container-fluid.top-nav{
 
 /* Brand Colors */
 
-.teal{
+  /* Type Colors */
-  color:#00ffd0;
-}
 
-.black{
+  .teal{
-  color: #1a1a1a;
+    color:#00ffd0;
-}
+  }
 
-.dark-gray{
+  .black{
-  color: #4d4d4d;
+    color: #1a1a1a;
-}
+  }
 
-.grid-gray{
+  .dark-gray{
-  color: #949494;
+    color: #4d4d4d;
-}
+  }
 
-.light-gray{
+  .grid-gray{
-  color: #e1e1e1;
+    color: #949494;
-}
+  }
 
-.white{
+  .light-gray{
-  color: #ffffff;
+    color: #e1e1e1;
-}
+  }
 
-.purple{
+  .white{
-  color: #8000ff;
+    color: #ffffff;
-}
+  }
 
-.orange{
+  .purple{
-  color: #ff4100;
+    color: #8000ff;
-}
+  }
+
+  .orange{
+    color: #ff4100;
+  }
+
+  /* Background Colors */
+
+  .teal-bg{
+    background-color:#00ffd0;
+  }
+
+  .black-bg{
+    background-color: #1a1a1a;
+  }
+
+  .dark-gray-bg{
+    background-color: #4d4d4d;
+  }
+
+  .grid-gray-bg{
+    background-color: #949494;
+  }
+
+  .light-gray-bg{
+    background-color: #e1e1e1;
+  }
+
+  .white-bg{
+    background-color: #ffffff;
+  }
+
+  .purple-bg{
+    background-color: #8000ff;
+  }
+
+  .orange-bg{
+    background-color: #ff4100;
+  }
 
 /* General Typography */