-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy paththank-you.html
144 lines (115 loc) · 5.99 KB
/
thank-you.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Open Source Initiative</title>
<link rel="stylesheet" href="/static/css/style.css">
<link rel="shortcut icon" sizes="16x16 32x32 48x48 128x128 256x256 512x512" href="/favicon.ico" type="image/x-icon">
<meta name="theme-color" content="#0b0c0c">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:title" content="Join the Open Source Initiative">
<meta property="description" content="Being an OSI member is a great way to get directly involved in open source community development and advocacy.">
<meta property="og:description" content="Being an OSI member is a great way to get directly involved in open source community development and advocacy.">
<meta property="og:image" content="https://join.opensource.org/static/img/fb3.gif" />
<meta property="twitter:image" content="https://join.opensource.org/static/img/twitter3.gif">
<meta name="theme-color" content="#1E531D">
<script defer data-domain="join.opensource.org" src="https://plausible.io/js/plausible.outbound-links.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<!-- SVG pattern generator from CDN -->
<script src=""></script>
<style media="all">
@font-face {
font-family: 'opensans';
src: local('OpenSans'), url('/static/fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'opensans';
src: local('OpenSans'), url('/static/fonts/OpenSans-Italic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'opensans';
src: local('OpenSans'), url('/static/fonts/OpenSans-Bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'opensans';
src: local('OpenSans'), url('/static/fonts/OpenSans-ExtraBold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
</style>
</head>
<body class="thank-you">
<a href="#main-content" id="skiptocontent">Skip to main content</a>
<a name="top"></a>
<nav class="navigation">
<h1>Open Source Initiative</h1>
</nav>
<header class="intro">
<div>
<h2>Thank you!<br>You're a free member!</h2>
<h3>Ready for more?</h3>
</div>
</header>
<picture class="header-image">
<source srcset="/static/img/audience.webp" type="image/webp">
<source srcset="/static/img/audience.jpg" type="image/jpeg">
<img src="../static/img/audience.jpg" alt="Abstract blurs of light background">
</picture>
<main id="main-content" class="main">
<div class="split">
<div>
<h4>Become a full member of OSI</h4>
<p id="m_cta" style="font-size:1.5rem;line-height:32px">Only <strong>$40 per year</strong></p>
<ul>
<li>Get the right to vote to elect the next board of directors</li>
<li>Sustain the open source movement</li>
</ul>
</div>
<div>
<a href="https://opensource.org/civicrm/contribute/transact?reset=1&id=1" class="button" style="margin-top:2rem" target="_blank" rel="noopener">Become a full member</a>
</div>
</div>
<hr />
<div class="split split2">
<div>
<div class="svg-container" style="margin-right:2rem"></div>
</div>
<div>
<h3>Display your personal badge!</h3>
<p>This unique badge is yours forever! OSI members are already sharing them on their social media channels.</p>
<button id="png">Download Badge</button>
<a href="" class="download-button button" download="osi_membership_badge.svg" onclick="window.plausible('Badge download SVG')">Download SVG</a>
<canvas id="canvas" style='display:none'></canvas>
</div>
</div>
<hr />
<h3 style="text-align:center">Tell your friends!</h3>
<div class="shareon" data-url="https://join.opensource.org" style="text-align:center">
<a class="facebook" aria-title="Facebook" data-title="Hey, I just joined @OpenSourceOrg to show my support of open source. You should do it too and get a cool unique badge"></a>
<a class="linkedin" aria-title="Linkedin" data-title="Hey, I just joined @OpenSourceOrg to show my support of open source. You should do it too and get a cool unique badge"></a>
<a class="mastodon" aria-title="Mastodon" data-title="Hey, I just joined @OpenSourceOrg to show my support of open source. You should do it too and get a cool unique badge"></a>
<a class="twitter" aria-title="Twitter" data-title="Hey, I just joined @OpenSourceOrg to show my support of open source. You should do it too and get a cool unique badge"></a>
</div>
<hr />
<p>You'll start receiving the OSI newsletter soon too! Meanwhile, check out <a href="https://opensource.org/newsletter/">past editions</a>.</p>
</main>
<footer>
<div>
<p>The content on this website, of which Opensource.org is the author, is licensed under a Creative Commons Attribution 4.0 International License.</p>
<p>Made with ❤️ by people from <a href="https://dev.ngo" rel="noopener">The Developer Society</a>.</p>
</div>
</footer>
<script src="/static/js/thanks.js"></script>
</body>
</html>