aboutsummaryrefslogtreecommitdiffstats
path: root/pyblackbird_cc/templates/pages/home.html
diff options
context:
space:
mode:
Diffstat (limited to 'pyblackbird_cc/templates/pages/home.html')
-rw-r--r--pyblackbird_cc/templates/pages/home.html185
1 files changed, 182 insertions, 3 deletions
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 %}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-08 20:14:25 +0000