Skip to content

Commit 50324c2

Browse files
author
Justin M
committed
add patreon support image and page
1 parent 22cf860 commit 50324c2

File tree

3 files changed

+135
-42
lines changed

3 files changed

+135
-42
lines changed

‎img/patreon.png

5.06 KB
Loading

‎index.html

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,9 @@ <h2 class="left">Online JSON Compare</h2>
5050

5151
</div>
5252
<div class="ad-container">
53-
<!-- BEGIN COPY CODEFUND EMBED -->
54-
<div id="codefund"></div>
55-
<script
56-
src="https://app.codefund.io/properties/700/funder.js"
57-
async
58-
></script>
59-
<!-- END COPY CODEFUND EMBED -->
53+
<a href="/sponsor/" title="Support us on Patreon">
54+
<img src="./img/patreon.png" alt="Support us on Patreon"/>
55+
</a>
6056
</div>
6157
</div>
6258
<div class="diff-inputs">

‎sponsor/index.html

Lines changed: 132 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,158 @@
22
<html>
33
<head>
44
<style>
5+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
6+
7+
body {
8+
font-family: 'Roboto', sans-serif;
9+
background-color: #F7F7F7;
10+
}
11+
12+
header {
13+
text-align: center;
14+
}
15+
16+
h1 {
17+
margin: 0;
18+
padding: 0;
19+
font-weight: lighter;
20+
text-transform: lowercase;
21+
padding-top: 6px;
22+
}
23+
24+
h2 {
25+
font-weight: lighter;
26+
color: #bbb;
27+
margin: 0;
28+
padding: 12px;
29+
padding-left: 32px;
30+
}
31+
532
.tier-grid {
633
display: flex;
34+
font-family: 'Roboto', sans-serif;
35+
flex-direction: row;
736
flex-wrap: wrap;
8-
justify-content: space-around;
9-
padding: 10px;
37+
justify-content: center;
38+
max-width: 1087px;
39+
margin: auto;
1040
}
41+
1142
.tier-card {
12-
width: 200px;
13-
border: 1px solid #ddd;
14-
border-radius: 5px;
15-
margin: 10px;
16-
padding: 10px;
17-
text-align: center;
43+
width: 320px;
44+
padding: 20px;
45+
box-sizing: border-box;
46+
margin: 20px;
47+
border: 1px solid #ccc;
48+
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
49+
background-color: #FFFFFF;
50+
}
51+
52+
.tier-card h3 {
53+
margin: 0;
1854
}
19-
.tier-title {
55+
56+
.tier-card .price {
2057
font-size: 1.5em;
21-
color: #333;
58+
margin: 10px 0;
59+
}
60+
61+
.tier-card a {
62+
display: block;
63+
padding: 10px;
64+
margin: 10px 0;
65+
background-color: #2E6DFF;
66+
color: #fff;
67+
text-decoration: none;
68+
text-align: center;
69+
text-transform: uppercase;
2270
}
23-
.tier-price {
24-
font-size: 1.2em;
25-
color: #333;
71+
72+
.tier-card a:hover {
73+
background-color: #2458d0;
2674
}
27-
.tier-description {
28-
color: #666;
75+
76+
.tier-card ul {
77+
list-style-type: none;
78+
padding: 0;
2979
}
30-
.tier-annotation {
31-
color: #999;
80+
81+
.tier-limit {
82+
color: #777;
83+
font-size: 14px;
3284
}
33-
.tier-button {
34-
background-color: #009688;
35-
color: white;
36-
padding: 10px 20px;
37-
text-align: center;
38-
text-decoration: none;
39-
display: inline-block;
40-
font-size: 16px;
41-
margin: 10px 2px;
42-
cursor: pointer;
85+
86+
.tier-benefits-list {
87+
padding-left: 20px;
4388
}
44-
.tier-button:hover {
45-
background-color: #007d71;
89+
90+
.tier-description {
91+
height: 145px;
4692
}
4793

94+
.advertiser-card .tier-description {
95+
height: 190px;
96+
}
4897
</style>
98+
<title>JSON Diff - Sponsorship</title>
4999
</head>
50100
<body>
101+
<header>
102+
<h1>{} Json Diff</h1>
103+
<h2>We appreciate your support</h2>
104+
</header>
51105
<div class="tier-grid">
52106
<div class="tier-card">
53-
<h3 class="tier-title">Patron</h3>
54-
<div class="tier-price">$1 / month</div>
55-
<p class="tier-description">Your support matters! In appreciation, we offer to mention your name or business name (with optional hyperlink) in a new sponsors popup on <a href="http://json-diff.com" target="_blank">json-diff.com</a>. We thank you for your contribution to our work!</p>
56-
<a href="/join/json_diff/checkout?rid=9821250" class="tier-button">Join</a>
57-
<div class="tier-annotation">Name shown under sponsors on json-diff.com</div>
107+
<h3>Patron</h3>
108+
<div class="price">$1 / month</div>
109+
<p class="tier-description">Your support matters! In appreciation, we offer to mention your name or business name (with optional hyperlink) in a new sponsors popup on json-diff.com. We thank you for your contribution to our work!</p>
110+
<a href="https://www.patreon.com/join/json_diff/checkout?rid=9821250">Join on Patreon</a>
111+
<ul>
112+
<li>Name shown under sponsors on json-diff.com</li>
113+
</ul>
114+
</div>
115+
116+
<div class="tier-card">
117+
<h3>Sponsor</h3>
118+
<div class="price">$5 / month</div>
119+
<p class="tier-description">With your valued support, we can continue to improve json-diff.com. As a token of our gratitude, we offer to list your name or business name (with optional hyperlink) in our sponsors popup. Thank you for backing our mission!</p>
120+
<a href="https://www.patreon.com/join/json_diff/checkout?rid=9821252">Join on Patreon</a>
121+
<ul>
122+
<li>Name shown under sponsors on json-diff.com</li>
123+
</ul>
124+
</div>
125+
126+
<div class="tier-card">
127+
<h3>Benefactor</h3>
128+
<div class="price">$10 / month</div>
129+
<p class="tier-description">Your generous support fuels our work! We'd like to recognize you by featuring your name or business name (with an optional hyperlink) in our sponsors popup on json-diff.com. Your contribution makes a difference!</p>
130+
<a href="https://www.patreon.com/join/json_diff/checkout?rid=9821255">Join on Patreon</a>
131+
<ul>
132+
<li>Name shown under sponsors on json-diff.com</li>
133+
</ul>
134+
</div>
135+
136+
<div class="tier-card advertiser-card">
137+
<h3>Text Banner Advertiser</h3>
138+
<p><div class="tier-limit">Limit 1 subscriber</div></p>
139+
<div class="price">$25 / month</div>
140+
<p class="tier-description">Want to reach a highly engaged tech audience of 3,000+ monthly active users? With this tier, you can have a dedicated text banner ad of up to 200 characters, displayed in a footer on json-diff.com, without rotation. Ads may not contain scripts and are subject to approval.</p>
141+
<a href="https://www.patreon.com/join/json_diff/checkout?rid=9821264">Join on Patreon</a>
142+
<ul class="tier-benefits-list">
143+
<li>Dedicated Text Ad Displayed on json-diff.com</li>
144+
</ul>
145+
</div>
146+
147+
<div class="tier-card advertiser-card">
148+
<h3>Image Advertiser</h3>
149+
<p><div class="tier-limit">Limit 1 subscriber</div></p>
150+
<div class="price">$50 / month</div>
151+
<p class="tier-description">Looking to maximize your visibility? This tier allows you to display an image (130x100 pixels) + text ad (100 characters max) on json-diff.com in the bottom left corner of the page. This is an excellent way to connect with our tech-focused audience of 3,000+ monthly active users. Ads may not contain scripts and are subject to approval.</p>
152+
<a href="https://www.patreon.com/join/json_diff/checkout?rid=9821275">Join on Patreon</a>
153+
<ul class="tier-benefits-list">
154+
<li>Dedicated Text Ad Displayed on json-diff.com</li>
155+
</ul>
58156
</div>
59-
<!-- Add more tier-cards here -->
60157
</div>
61158
</body>
62159
</html>

0 commit comments

Comments
 (0)