Speed comparison terminals

src/layouts/index.html

@@ -129,6 +129,43 @@
 
 </style>
 
+<!-- Features -->
+
+<section>
+  <div class="container">
+    <div class="row one-box">
+      <div class="col">
+        <h3 class="one-box-down">tea Features (<span class="release"></span>)</h3>
+        <h2>TO CALL TEA ‘REVOLUTIONARY’ WOULD BE AN UNDERSTATEMENT. <a href="https://twitter.com/mxcl?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" style="color:#2675f5;">@MXCL</a> HAS SET A NEW BAR.</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col p-5" style="border: 2px solid gray;">
+        <p class="lead">While homebrew takes about as long as your earl grey takes to steep, tea is done before you’ve time to put the bag in the cup.</p>
+        <div class="flex">
+          <div class="speed-terminal">
+
+          </div>
+          <div class="speed-terminal">
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+
+  .speed-terminal{
+    width: 50%;
+    height: 500px;
+    background-color: #4d4d4d;
+    border-radius: 10px;
+  }
+
+</style>
+
 
 <!-- Statistics -->
 

src/static/css/homepage.css

@@ -139,7 +139,7 @@ mark{
 @media only screen and (min-width: 1200px) {
 
   .hero-section{
-    background-image: url("/Images/x-large-grid-generative-art.png") !important;
+    background-image: url("/Images/x-large-grid.svg") !important;
     background-attachment: scroll;
     background-position: top;
     background-repeat: repeat-y;

src/static/css/typography.css

@@ -27,6 +27,7 @@ h1{
 h2{
   font-family: "pp-neue-machina", sans-serif;
   color:#00ffd0;
+  text-transform:uppercase;
 }
 
 h3{