Merge branch 'feature/utility-classes' of git.startinblox.com:applications/sib-app into feature/utility-classes

src/styles/base/about.scss

@@ -0,0 +1,58 @@
+#about{
+  $main-color: rgb(236, 94, 92);
+  $second-color: white;
+  h2,h3{
+    text-transform: uppercase;
+  }
+  h2{
+    margin-left: 1.5em;
+  }
+  .flex-content-white{ 
+    display: flex;
+    @media only screen and (max-width: 768px) {
+      flex-direction: column;
+    }
+    >div{
+      padding: 2em 2.5em; 
+      text-align: center;
+      margin: 0 1.5em 3em 1.5em;
+      background: white;
+      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.11);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    >div:first-child{
+      width: 60%;
+    }
+    >div:last-child{
+      width: 35%;
+      @media only screen and (max-width: 768px) {
+        width: 60%;
+      }
+    }
+    a{
+      text-decoration: none;
+    }
+  }
+
+  .main-cta{
+    background: $second-color none repeat scroll 0% 0%;
+    border: 1px solid $main-color;
+    border-radius: 55px;
+    color: $main-color;
+    cursor: pointer;
+    font-weight: bold;
+    text-transform: uppercase;
+    width: 25%;
+    font-size: 1.1rem;
+    align-self: center;
+    padding: 0.5rem 1.5rem;
+  }
+
+  .main-cta:hover{
+    background: $main-color none repeat scroll 0% 0%;
+    border : 1px solid $second-color;
+    color: $second-color;
+  }
+}

src/styles/index.scss

@@ -8,6 +8,7 @@
 @import 'abstracts/mixins';
 @import 'components/icons/index';
 @import 'base/main';
+@import 'base/about';
 
 #viewport {
     display: flex;