forked from recurly/recurly-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gridsystem.html
70 lines (63 loc) · 1.59 KB
/
gridsystem.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>RecurlyJS Grid System Example</title>
<link rel="stylesheet" href="gridsystem.css" type="text/css" />
<link rel="stylesheet" href="../themes/default/recurly.css" type="text/css" />
<script src="../lib/jquery-1.7.1.js"></script>
<script src="../build/recurly.js"></script>
<script>
Recurly.config({
subdomain: 'recurlyjsdemo-test'
, currency: 'GBP'
, country: 'GB'
, VATPercent: 10
});
Recurly.buildSubscriptionForm({
target: '#recurly-subscribe'
, planCode: 'complexplan'
, accountCode: 'test'
, successURL: 'confirmation.html'
, signature: 'c5996d424684456ffb82704f08a6d00dd5cedd73-0'
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1>
Your Website
</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div id="content-container">
<div id="content">
<div id="recurly-subscribe">
</div>
</div>
<div id="sidebar">
<p>
This example demonstrates the use of recurly.js in a 960/12/20 grid system.
</p>
<p>
The subscribe form style is tuned to 480/12/20 (960/2 = 480) which makes columns in multiple of 2 divide evenly into the columns of the 960 parent.
</p>
<p>
You can tweak the dimensions in recurly.styl to fit your content and design.
</p>
</div>
<div id="footer">
<div id="demo480">480px</div>
<div id="demo960">960px</div>
</div>
</div>
</div>
</body>
</html>