mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-27 06:44:07 -06:00
💄 update pricing page ui
This commit is contained in:
ransurf
Matthew Wong
parent
001a1cb700
commit
d85d279b3b
@ -1,65 +1,142 @@
|
||||
$base-color: rgb(20, 20, 20);
|
||||
$base-color-light: rgb(104, 104, 104);
|
||||
$primary-color: rgb(40, 75, 98);
|
||||
$secondary-color: rgb(73, 144, 191);
|
||||
|
||||
* {
|
||||
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;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plan-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&-text {
|
||||
text-align: center;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* Grey list item */
|
||||
.price .grey {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
margin: 4px 4px;
|
||||
}
|
||||
|
||||
/* Style the list */
|
||||
.plan-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.plan-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 40px;
|
||||
//flex-direction colunn for mobile
|
||||
@media (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pricing header */
|
||||
.plan {
|
||||
height: 560px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 24px;
|
||||
padding: 0 0 40px 0;
|
||||
gap: 32px;
|
||||
margin-top: 32px;
|
||||
background-color: $base-color;
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
border-radius: 24px 24px 0px 0px;
|
||||
background-color: $primary-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// border-bottom: solid white;
|
||||
// border-width: 4px;
|
||||
}
|
||||
&-label {
|
||||
margin-bottom: 0px;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
}
|
||||
&-price {
|
||||
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;
|
||||
|
||||
&-body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
|
||||
&-list {
|
||||
width: 100%;
|
||||
background-color: $base-color;
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
font-size: 1em;
|
||||
li {
|
||||
margin: 0px 24px;
|
||||
}
|
||||
}
|
||||
li:before {
|
||||
background-color: #111;
|
||||
content: '\2713';
|
||||
display: inline-block;
|
||||
color: green;
|
||||
padding: 0 6px 0 0;
|
||||
}
|
||||
}
|
||||
:hover {
|
||||
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Grey list item */
|
||||
.price .grey {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* The "Sign Up" button */
|
||||
.button {
|
||||
background-color: #284b63;
|
||||
border-radius: 8px;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
.premium {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
@ -1,6 +1,3 @@
|
||||
---
|
||||
title: Pricing
|
||||
---
|
||||
Fleeting Notes will always be **100% free offline**. If you're interested in accessing insider builds, [donating](https://ko-fi.com/fleetingnotes) will give you access to those.
|
||||
|
||||
{{< pricing-tables >}}
|
||||
@ -9,9 +9,9 @@
|
||||
{{partial "header.html" .}}
|
||||
<article>
|
||||
{{if .Title}}<h1>{{ .Title }}</h1>{{end}}
|
||||
<p class="meta">
|
||||
<!-- <p class="meta">
|
||||
Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
|
||||
</p>
|
||||
</p> -->
|
||||
<ul class="tags">
|
||||
{{ range (.GetTerms "tags") }}
|
||||
<li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li>
|
||||
|
||||
@ -1,25 +1,74 @@
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<ul class="price">
|
||||
<li class="header">Free</li>
|
||||
<li class="grey">$ 0 / month<br><br><a href="https://my.fleetingnotes.app/" class="button">Get started</a></li>
|
||||
<li>Unlimited Notes</li>
|
||||
<li>Only 1 device logged in at a time</li>
|
||||
<li><a class="internal-link" href="/posts/end-to-end-encryption-in-fleeting-notes/">End-to-end encryption</a></li>
|
||||
<li>10 GB attachment upload limit</li>
|
||||
<li>Blazing fast full-text search</li>
|
||||
<li>Access to Chrome / Firefox Extension, iOS, Android & Web App</li>
|
||||
<li>Access to <a href="https://github.com/fleetingnotes/fleeting-notes-obsidian">plugin</a> for Obsidian MD sync</li>
|
||||
<div class="plan-page">
|
||||
<h1 class="plan-title">Pricing</h1>
|
||||
<div>
|
||||
<p class="plan-page-text">
|
||||
Fleeting Notes will always be <b>100% free offline.</b>
|
||||
</p>
|
||||
<p class="plan-page-text">
|
||||
If you're interested in accessing insider builds,
|
||||
<a href="https://ko-fi.com/fleetingnotes">donating</a> will give you
|
||||
access to those.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="plan-container">
|
||||
<div class="plan">
|
||||
<div class="plan-header">
|
||||
<h1 class="plan-label">Free</h1>
|
||||
<p class="plan-price">$0/month</p>
|
||||
</div>
|
||||
<div class="plan-body">
|
||||
<ul class="plan-list">
|
||||
<li>Unlimited Notes</li>
|
||||
<li>Only 1 device logged in at a time</li>
|
||||
<li>
|
||||
<a
|
||||
class="internal-link"
|
||||
href="/posts/end-to-end-encryption-in-fleeting-notes/"
|
||||
>End-to-end encryption</a
|
||||
>
|
||||
</li>
|
||||
<li>10 GB attachment upload limit</li>
|
||||
<li>Blazing fast full-text search</li>
|
||||
<li>Browser Extension (Chrome, Firefox)</li>
|
||||
<li>Android & iOS App</li>
|
||||
<li>
|
||||
Access to
|
||||
<a href="https://github.com/fleetingnotes/fleeting-notes-obsidian"
|
||||
>plugin</a
|
||||
>
|
||||
for Obsidian MD sync
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://my.fleetingnotes.app/" class="button button-cta"
|
||||
>Get started</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<ul class="price">
|
||||
<li class="header">Premium</li>
|
||||
<li class="grey">$6 / month<br><br><a href="https://payments.fleetingnotes.app" class="button">Try it free</a></li>
|
||||
<li><b>Everything on the Free plan, plus</b></li>
|
||||
<li>Unlimited logged in devices</li>
|
||||
<li>25 GB attachment upload limit</li>
|
||||
<li><a class="internal-link" href="/posts/how-ai-powered-links-supercharge-notetaking/">AI powered link suggestions</a></li>
|
||||
<div class="plan">
|
||||
<div class="plan-header premium">
|
||||
<h1 class="plan-label">Premium</h1>
|
||||
<p class="plan-price">$6/month</p>
|
||||
</div>
|
||||
<div class="plan-body">
|
||||
<ul class="plan-list">
|
||||
<li><b>Everything on the Free plan</b></li>
|
||||
<li>Unlimited logged in devices</li>
|
||||
<li>25 GB attachment upload limit</li>
|
||||
<li>
|
||||
<a
|
||||
class="internal-link"
|
||||
href="/posts/how-ai-powered-links-supercharge-notetaking/"
|
||||
>AI powered link suggestions</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<a
|
||||
href="https://payments.fleetingnotes.app"
|
||||
class="button button-cta premium"
|
||||
>Try it for free</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user