diff --git a/bootstrap/css/bootstrap.css b/bootstrap/css/bootstrap.css
index 33365bb..fe33c31 100644
--- a/bootstrap/css/bootstrap.css
+++ b/bootstrap/css/bootstrap.css
@@ -20,6 +20,7 @@
   --gray-dark: #343a40;
   --primary: #050505;
   --secondary: #ff449b;
+  --tertiary: #435CFF;
   --success: #28a745;
   --info: #17a2b8;
   --warning: #ffc107;
diff --git a/imgs/slant.svg b/imgs/slant.svg
new file mode 100644
index 0000000..03e916f
--- /dev/null
+++ b/imgs/slant.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M0,800L1280,0L0,0L0,800Z" style="fill:white;"/>
+</svg>
diff --git a/index.css b/index.css
index f5fb586..e8d6cf0 100644
--- a/index.css
+++ b/index.css
@@ -4,13 +4,15 @@ body {
   background: var(--light);
 }
 
-.header {
+.hero {
+  content: "";
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   position: relative;
-  height: 100%;
+  height: 90%;
+  background: url(./imgs/slant.svg);
 }
 
 .overlay {
diff --git a/index.html b/index.html
index e84f740..78cb774 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
   </div>
   </nav>
 
-  <header  class="parallax-window page-header header container-fluid"
+  <header  class="parallax-window page-header hero container-fluid slanted"
   data-parallax="scroll" data-image-src="imgs/header-background.jpg">
     <div class="overlay"></div>
     <div class="description">
@@ -42,6 +42,7 @@
     </div>
   </header>
 
+  <section class="">
   <div class="container features">
     <div class="row">
       <div class="col-lg-4 col-md-4 col-sm-12">
@@ -69,10 +70,7 @@
       </div>
     </div>
   </div>
-
-  <div>
-
-  </div>
+  </section>
 
   <footer class="page-footer">
     <div class="container">
diff --git a/style.css b/style.css
index c3d7005..49b6eb6 100644
--- a/style.css
+++ b/style.css
@@ -6,8 +6,8 @@
 
 body {
   font-family: 'Fira Sans';
-  color: #fff;
-  background: var(--primary);
+  /* color: #fff;
+  background: var(--primary); */
 }
 
 /* text styles */
@@ -32,11 +32,38 @@ h3 {
 
 .dark {
   background: var(--primary);
-  back
   background-size: cover;
   color: #fff;
 }
 
+.magenta {
+  background: var(--secondary);
+  color: #fff;
+}
+
+.blue {
+  background: var(--tertiary);
+  color: #fff;
+}
+
+.slanted {
+  position: relative;
+  z-index: 1;
+}
+.slanted:after {
+  background: inherit;
+  bottom: 0;
+  content: '';
+  display: block;
+  height: 50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  transform: skewY(-1.5deg);
+  transform-origin: 100%;
+  z-index: -1;
+}
+
 /* navigation bar */
 .navbar {
   background: var(--primary);