Adds basic pricing section and footer

3 files changed, 223 insertions, 3 deletions

diff --git a/pyblackbird_cc/static/css/features.css b/pyblackbird_cc/static/css/features.css
index 27a2149..d802672 100644
--- a/pyblackbird_cc/static/css/features.css
+++ b/pyblackbird_cc/static/css/features.css
@@ -5,6 +5,9 @@
     border-width: 1px 0;
     box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
 }
+.pricing-header {
+    max-width: 700px;
+}
 
 .feature-divider {
     height: 1px; /* Thin line */
diff --git a/pyblackbird_cc/templates/base.html b/pyblackbird_cc/templates/base.html
index b06e313..750fd75 100644
--- a/pyblackbird_cc/templates/base.html
+++ b/pyblackbird_cc/templates/base.html
@@ -102,6 +102,44 @@
             <div class="container">
                 {% block content %}
                 {% endblock content %}
+              <footer class="pt-4 my-md-5 pt-md-5 border-top">
+    <div class="row">
+      <div class="col-12 col-md">
+        <img class="mb-2" src="../assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
+        <small class="d-block mb-3 text-muted">&copy; 2017–2021</small>
+      </div>
+      <div class="col-6 col-md">
+        <h5>Features</h5>
+        <ul class="list-unstyled text-small">
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-md">
+        <h5>Resources</h5>
+        <ul class="list-unstyled text-small">
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-md">
+        <h5>About</h5>
+        <ul class="list-unstyled text-small">
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+
             </div>
         {% endblock main %}
     {% endblock body %}
diff --git a/pyblackbird_cc/templates/pages/home.html b/pyblackbird_cc/templates/pages/home.html
index c759668..2d60d83 100644
--- a/pyblackbird_cc/templates/pages/home.html
+++ b/pyblackbird_cc/templates/pages/home.html
@@ -4,6 +4,10 @@
 {% block content %}
 
     <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+        <symbol id="check" viewBox="0 0 16 16">
+            <title>Check</title>
+            <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+        </symbol>
         <symbol id="bootstrap" viewBox="0 0 118 94">
             <title>Bootstrap</title>
             <path fill-rule="evenodd" clip-rule="evenodd"
@@ -100,7 +104,8 @@
                         </div>
                         <div>
                             <h2>First benefit</h2>
-                            <p>{% lorem %}</p>
+                            <p>Some nice descriptive text about the feature here. Sell it and make
+                                it really exciting!</p>
                             <a href="#" class="icon-link">
                                 Call to action
                                 <svg class="bi" width="1em" height="1em">
@@ -117,7 +122,8 @@
                         </div>
                         <div>
                             <h2>Featured title</h2>
-                            <p>{% lorem %}</p>
+                            <p>Some nice descriptive text about the feature here. Sell it and make
+                                it really exciting!</p>
                             <a href="#" class="icon-link">
                                 Call to action
                                 <svg class="bi" width="1em" height="1em">
@@ -134,7 +140,8 @@
                         </div>
                         <div>
                             <h2>Featured title</h2>
-                            <p>{% lorem %}</p>
+                            <p>Some nice descriptive text about the feature here. Sell it and make
+                                it really exciting!</p>
 
                             <a href="#" class="icon-link">
                                 Call to action
@@ -150,4 +157,176 @@
     </div>
 
     <div class="feature-divider"></div>
+
+    <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
+        <h1 class="display-4 fw-normal">Pricing</h1>
+        <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this
+            Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
+    </div>
+
+
+    <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
+        <div class="col">
+            <div class="card mb-4 rounded-3 shadow-sm">
+                <div class="card-header py-3">
+                    <h4 class="my-0 fw-normal">Starter</h4>
+                </div>
+                <div class="card-body">
+                    <h1 class="card-title pricing-card-title">£0<small class="text-muted fw-light">/mo</small></h1>
+                    <ul class="list-unstyled mt-3 mb-4">
+                        <li>20 resources included</li>
+                        <li>Something else that is basic</li>
+                        <li>Email support</li>
+                        <li>Help center access</li>
+                    </ul>
+                    <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card mb-4 rounded-3 shadow-sm">
+                <div class="card-header py-3">
+                    <h4 class="my-0 fw-normal">Learner</h4>
+                </div>
+                <div class="card-body">
+                    <h1 class="card-title pricing-card-title">£4.99<small class="text-muted fw-light">/mo</small></h1>
+                    <ul class="list-unstyled mt-3 mb-4">
+                        <li>100 resources included</li>
+                        <li>Something else that is pro</li>
+                        <li>Email support</li>
+                        <li>Help center access</li>
+                    </ul>
+                    <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="card mb-4 rounded-3 shadow-sm border-primary">
+                <div class="card-header py-3 text-white bg-primary border-primary">
+                    <h4 class="my-0 fw-normal">Member</h4>
+                </div>
+                <div class="card-body">
+                    <h1 class="card-title pricing-card-title">£8.99<small class="text-muted fw-light">/mo</small></h1>
+                    <ul class="list-unstyled mt-3 mb-4">
+                        <li>All resources included</li>
+                        <li>Something else that is really good</li>
+                        <li>Email support</li>
+                        <li>Help center access</li>
+                    </ul>
+                    <button type="button" class="w-100 btn btn-lg btn-primary">Get Started</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <h2 class="display-6 text-center mb-4">Compare plans</h2>
+
+    <div class="table-responsive">
+        <table class="table text-center">
+            <thead>
+            <tr>
+                <th style="width: 34%;"></th>
+                <th style="width: 22%;">Starter</th>
+                <th style="width: 22%;">Learner</th>
+                <th style="width: 22%;">Member</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <th scope="row" class="text-start">Public</th>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+            </tr>
+            <tr>
+                <th scope="row" class="text-start">Private</th>
+                <td></td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+            </tr>
+            </tbody>
+
+            <tbody>
+            <tr>
+                <th scope="row" class="text-start">Permissions</th>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+            </tr>
+            <tr>
+                <th scope="row" class="text-start">Sharing</th>
+                <td></td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+            </tr>
+            <tr>
+                <th scope="row" class="text-start">Unlimited members</th>
+                <td></td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+            </tr>
+            <tr>
+                <th scope="row" class="text-start">Extra security</th>
+                <td></td>
+                <td></td>
+                <td>
+                    <svg class="bi" width="24" height="24">
+                        <use xlink:href="#check"/>
+                    </svg>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+
+
+
 {% endblock content %}