From b6970f306d96a0fb6da51950c93d7184826607ac Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Tue, 20 Aug 2019 16:42:19 +0200
Subject: [PATCH] cards

---
 homepage/theme/templates/base.html | 26 ++++++++++++++++-
 styles/index.css                   | 45 ++++++++++++++++++++++++++++--
 2 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html
index 8b70dce..5cf2cea 100644
--- a/homepage/theme/templates/base.html
+++ b/homepage/theme/templates/base.html
@@ -83,7 +83,31 @@
     </div>
     <div class="feature">
       <div class="container-full">
-        FEATURE
+
+        <div class="card-deck">
+          <div class="card">
+            <div class="card-body">
+              <div class="cardtext">
+              Feature Text 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body">
+              <div class="cardtext">
+              Feature Text 2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-body">
+              <div class="cardtext">
+              Feature Text 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
     </div>
     <div class="cta-top">
diff --git a/styles/index.css b/styles/index.css
index 04a2608..4669dc9 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -305,7 +305,7 @@ nav ul li ul li a {
   height: 70px;
   width: 70px;
 }
-
+/* Mobile Styles */
 @media only screen and (max-width: 960px) {
   .nav-mobile {
     display: block;
@@ -339,7 +339,7 @@ nav ul li ul li a {
     */
 	}
 }
-
+/* Desktop Styles */
 @media screen and (min-width: 961px) {
   .nav-list {
     display: block !important;
@@ -386,5 +386,44 @@ nav ul li ul li a {
 
 
 /* ---------------------------------------------------
-IMAGES
+CARDS
 ----------------------------------------------------*/
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-clip: border-box;
+}
+.card-body {
+  flex: 1 1 auto;
+  text-align: center;
+}
+.card-deck {
+  display: flex;
+  flex-direction: column;
+}
+.card-deck .card {
+  margin: 0 0 15px 0;
+}
+
+/* Mobile Styles */
+@media only screen and (max-width: 960px) {
+
+}
+
+/* Desktop Styles */
+@media only screen and (min-width: 961px) {
+  /* Card */
+  .card-deck {
+    flex-flow: row wrap;
+    margin: 0 -15px 0 -15px;
+  }
+  .card-deck .card {
+    display: flex;
+    flex: 1 0 0%;
+    flex-direction: column;
+    margin: 0 15px 0 15px;
+  }
+}