From f59e257a73e937ab4edc9934a8e9d24b8815f780 Mon Sep 17 00:00:00 2001 From: Matthew Wong Date: Wed, 4 May 2022 23:28:02 -0400 Subject: [PATCH] add responsive pricing table --- assets/styles/pricing.scss | 65 ++++++++++++++++++++++++++++ content/download.md | 2 +- content/pricing.md | 4 ++ layouts/_default/pricing.html | 16 +++++++ layouts/partials/header.html | 2 +- layouts/partials/pricing-tables.html | 23 ++++++++++ 6 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 assets/styles/pricing.scss create mode 100644 content/pricing.md create mode 100644 layouts/_default/pricing.html create mode 100644 layouts/partials/pricing-tables.html diff --git a/assets/styles/pricing.scss b/assets/styles/pricing.scss new file mode 100644 index 000000000..063c0ce47 --- /dev/null +++ b/assets/styles/pricing.scss @@ -0,0 +1,65 @@ +* { + box-sizing: border-box; + } + + /* Create three columns of equal width */ + .pricing-columns { + float: left; + width: 50%; + padding: 8px; + } + + /* Style the list */ + .price { + list-style-type: none; + border: 1px solid #eee; + margin: 0; + padding: 0; + -webkit-transition: 0.3s; + transition: 0.3s; + } + + /* Add shadows on hover */ + .price:hover { + box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) + } + + /* Pricing header */ + .price .header { + background-color: #111; + color: white; + font-size: 25px; + } + + /* List items */ + .price li { + border-bottom: 1px solid #eee; + padding: 20px; + text-align: center; + } + + /* Grey list item */ + .price .grey { + background-color: #eee; + font-size: 20px; + color: black; + } + + /* The "Sign Up" button */ + .button { + background-color: #284b63; + border: none; + color: white; + padding: 10px 25px; + text-align: center; + text-decoration: none; + font-size: 18px; + } + + /* Change the width of the three columns to 100% + (to stack horizontally on small screens) */ + @media only screen and (max-width: 600px) { + .pricing-columns { + width: 100%; + } + } \ No newline at end of file diff --git a/content/download.md b/content/download.md index 96c47dfec..236faf7c7 100644 --- a/content/download.md +++ b/content/download.md @@ -6,4 +6,4 @@ Don't want to download anything? Try the [web app](https://my.fleetingnotes.app) ## Download Links - Download the [chrome extension](https://chrome.google.com/webstore/detail/fleeting-notes/gcplhmogdjioeaenmehmapbdonklmdnc/) - Download the [firefox extension](https://addons.mozilla.org/en-CA/firefox/addon/fleeting-notes/) -- Get Early Access to iOS / Android by [donating](https://ko-fi.com/fleetingnotes) $1 \ No newline at end of file +- Get early access to iOS / Android by becoming an early adopter \ No newline at end of file diff --git a/content/pricing.md b/content/pricing.md new file mode 100644 index 000000000..98a721174 --- /dev/null +++ b/content/pricing.md @@ -0,0 +1,4 @@ +--- +title: Pricing +layout: "pricing" +--- \ No newline at end of file diff --git a/layouts/_default/pricing.html b/layouts/_default/pricing.html new file mode 100644 index 000000000..c53b0e908 --- /dev/null +++ b/layouts/_default/pricing.html @@ -0,0 +1,16 @@ + + +{{ partial "head.html" . }} + + +{{partial "search.html" .}} +
+ + {{partial "header.html" .}} + {{partial "pricing-tables.html"}} + {{partial "footer.html" .}} + {{partial "popover.html" .}} +
+ + + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 39244dd80..65dc9332b 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -4,7 +4,7 @@
Downloads - Pricing + Pricing Blog diff --git a/layouts/partials/pricing-tables.html b/layouts/partials/pricing-tables.html new file mode 100644 index 000000000..9cdd90bcc --- /dev/null +++ b/layouts/partials/pricing-tables.html @@ -0,0 +1,23 @@ +

Pricing

+
+
    +
  • Free
    • +
  • $ 0 / month

    Try It Free
    • +
  • Unlimited Notes
    • +
  • Chrome / Firefox Web Extension & Web App
    • +
  • Full-text search
    • +
  • Up to 2 devices logged in concurrently
    • +
  • Access to plugin for Obsidian MD sync
    • +
+
+
+
    +
  • Early Adopter
    • +
  • $3 / month (75% off)

    Subscribe
    • +
  • Everything on the Free plan, plus
    • +
  • Access to Beta Versions
    (including Android / iOS builds)
    • +
  • AI Powered Link Suggestions & Search (coming soon)
    • +
  • Unlimited Devices
    • +
  • Early adopter pricing forever
    (75% off)
    • +
+
\ No newline at end of file