mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-27 14:54:05 -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;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Create three columns of equal width */
|
.plan-page {
|
||||||
.pricing-columns {
|
display: flex;
|
||||||
float: left;
|
flex-direction: column;
|
||||||
width: 50%;
|
align-items: center;
|
||||||
padding: 8px;
|
&-text {
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
text-align: center;
|
||||||
|
margin: 4px 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
/* Grey list item */
|
|
||||||
.price .grey {
|
.plan-title {
|
||||||
background-color: #eee;
|
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;
|
font-size: 20px;
|
||||||
color: black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The "Sign Up" button */
|
&-body {
|
||||||
.button {
|
height: 100%;
|
||||||
background-color: #284b63;
|
display: flex;
|
||||||
border: none;
|
flex-direction: column;
|
||||||
color: white;
|
align-items: center;
|
||||||
padding: 10px 25px;
|
justify-content: space-between;
|
||||||
text-align: center;
|
gap: 16px;
|
||||||
text-decoration: none;
|
width: 100%;
|
||||||
font-size: 18px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Change the width of the three columns to 100%
|
&-list {
|
||||||
(to stack horizontally on small screens) */
|
width: 100%;
|
||||||
@media only screen and (max-width: 600px) {
|
background-color: $base-color;
|
||||||
.pricing-columns {
|
display: flex;
|
||||||
width: 100%;
|
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 >}}
|
{{< pricing-tables >}}
|
||||||
@ -9,9 +9,9 @@
|
|||||||
{{partial "header.html" .}}
|
{{partial "header.html" .}}
|
||||||
<article>
|
<article>
|
||||||
{{if .Title}}<h1>{{ .Title }}</h1>{{end}}
|
{{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}}
|
Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}
|
||||||
</p>
|
</p> -->
|
||||||
<ul class="tags">
|
<ul class="tags">
|
||||||
{{ range (.GetTerms "tags") }}
|
{{ range (.GetTerms "tags") }}
|
||||||
<li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li>
|
<li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li>
|
||||||
|
|||||||
@ -1,25 +1,74 @@
|
|||||||
<div class="row">
|
<div class="plan-page">
|
||||||
<div class="col-6">
|
<h1 class="plan-title">Pricing</h1>
|
||||||
<ul class="price">
|
<div>
|
||||||
<li class="header">Free</li>
|
<p class="plan-page-text">
|
||||||
<li class="grey">$ 0 / month<br><br><a href="https://my.fleetingnotes.app/" class="button">Get started</a></li>
|
Fleeting Notes will always be <b>100% free offline.</b>
|
||||||
<li>Unlimited Notes</li>
|
</p>
|
||||||
<li>Only 1 device logged in at a time</li>
|
<p class="plan-page-text">
|
||||||
<li><a class="internal-link" href="/posts/end-to-end-encryption-in-fleeting-notes/">End-to-end encryption</a></li>
|
If you're interested in accessing insider builds,
|
||||||
<li>10 GB attachment upload limit</li>
|
<a href="https://ko-fi.com/fleetingnotes">donating</a> will give you
|
||||||
<li>Blazing fast full-text search</li>
|
access to those.
|
||||||
<li>Access to Chrome / Firefox Extension, iOS, Android & Web App</li>
|
</p>
|
||||||
<li>Access to <a href="https://github.com/fleetingnotes/fleeting-notes-obsidian">plugin</a> for Obsidian MD sync</li>
|
</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>
|
</ul>
|
||||||
|
<a href="https://my.fleetingnotes.app/" class="button button-cta"
|
||||||
|
>Get started</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="plan">
|
||||||
<ul class="price">
|
<div class="plan-header premium">
|
||||||
<li class="header">Premium</li>
|
<h1 class="plan-label">Premium</h1>
|
||||||
<li class="grey">$6 / month<br><br><a href="https://payments.fleetingnotes.app" class="button">Try it free</a></li>
|
<p class="plan-price">$6/month</p>
|
||||||
<li><b>Everything on the Free plan, plus</b></li>
|
</div>
|
||||||
<li>Unlimited logged in devices</li>
|
<div class="plan-body">
|
||||||
<li>25 GB attachment upload limit</li>
|
<ul class="plan-list">
|
||||||
<li><a class="internal-link" href="/posts/how-ai-powered-links-supercharge-notetaking/">AI powered link suggestions</a></li>
|
<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>
|
</ul>
|
||||||
|
<a
|
||||||
|
href="https://payments.fleetingnotes.app"
|
||||||
|
class="button button-cta premium"
|
||||||
|
>Try it for free</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user