GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 05:14:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

add responsive pricing table

Browse Source
This commit is contained in:
Matthew Wong 2022-05-04 23:28:02 -04:00
parent 2816e51428
commit f59e257a73
6 changed files with 110 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
assets/styles/pricing.scss Normal file
View File

@ -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%;
}
}

2
content/download.md
View File

@ -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
- Get early access to iOS / Android by becoming an <a href="/pricing">early adopter</a>

4
content/pricing.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Pricing
layout: "pricing"
---

16
layouts/_default/pricing.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="{{ .Lang }}">
{{ partial "head.html" . }}
<body>
{{partial "search.html" .}}
<div class="singlePage">
<!-- Begin actual content -->
{{partial "header.html" .}}
{{partial "pricing-tables.html"}}
{{partial "footer.html" .}}
{{partial "popover.html" .}}
</div>
</body>
</html>

2
layouts/partials/header.html
View File

@ -4,7 +4,7 @@
<a href="/" class="logo">Fleeting Notes</a>
<div class="header-right">
<a href="/download">Downloads</a>
<a href="/">Pricing</a>
<a href="/pricing">Pricing</a>
<a href="/posts">Blog</a>
<a href="javascript:void(0);" id="search-icon">
<i class="fa fa-search"></i>

23
layouts/partials/pricing-tables.html Normal file
View File

@ -0,0 +1,23 @@
<h1>Pricing</h1>
<div class="pricing-columns">
<ul class="price">
<li class="header">Free</li>
<li class="grey">$ 0 / month<br><br><a href="/download" class="button">Try It Free</a></li>
<li>Unlimited Notes</li>
<li>Chrome / Firefox Web Extension & Web App</li>
<li>Full-text search</li>
<li>Up to 2 devices logged in concurrently</li>
<li>Access to <a href="https://github.com/fleetingnotes/fleeting-notes-obsidian">plugin</a> for Obsidian MD sync</li>
</ul>
</div>
<div class="pricing-columns">
<ul class="price">
<li class="header">Early Adopter</li>
<li class="grey">$3 / month <b>(75% off)</b><br><br><a href="https://payments.fleetingnotes.app" class="button">Subscribe</a></li>
<li><b>Everything on the Free plan, plus</b></li>
<li>Access to Beta Versions<br>(including Android / iOS builds)</li>
<li>AI Powered Link Suggestions & Search (coming soon)</li>
<li>Unlimited Devices</li>
<li>Early adopter pricing forever<br>(75% off)</li>
</ul>
</div>