-
Notifications
You must be signed in to change notification settings - Fork 2
/
plans.html
140 lines (135 loc) · 5.21 KB
/
plans.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing - Online Code Editor</title>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./src/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./src/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Roboto Mono', monospace;
background-color: #f8f9fa;
}
.pricing-section {
margin-top: 50px;
}
.pricing-card {
border: 1px solid #e3e6f0;
border-radius: 10px;
transition: transform 0.3s ease-in-out;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.pricing-card:hover {
transform: scale(1.05);
}
.pricing-header {
background-color: #28a745; /* Green Header */
color: white;
padding: 20px;
border-radius: 10px 10px 0 0;
}
.pricing-price {
font-size: 2rem;
font-weight: bold;
color: white; /* White Price Text */
}
.pricing-description {
font-size: 1.2rem;
color: #333;
}
.cta-button {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1.2rem;
width: 100%;
text-align: center;
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="container pricing-section">
<div class="row text-center">
<div class="col-12">
<h1>Our Pricing Plans</h1>
<p class="lead">Choose the perfect plan for your needs</p>
</div>
</div>
<div class="row">
<!-- Basic Plan (Free) -->
<div class="col-md-4 mb-4">
<div class="pricing-card">
<div class="pricing-header">
<h3>Basic Plan</h3>
<p class="pricing-price">Free</p>
</div>
<div class="card-body">
<p class="pricing-description">Perfect for individual developers or hobbyists who need basic features.</p>
<ul>
<li>Access to HTML, CSS, and JS Editor</li>
<li>Basic Syntax Highlighting</li>
<li>1 GB Cloud Storage</li>
<li>Community Support</li>
</ul>
<button href="https://editor.tholumuzi.co.za/editor.html" class="cta-button">Choose Plan</button>
</div>
</div>
</div>
<!-- Professional Plan -->
<div class="col-md-4 mb-4">
<div class="pricing-card">
<div class="pricing-header">
<h3>Professional Plan</h3>
<p class="pricing-price">R399/month</p>
</div>
<div class="card-body">
<p class="pricing-description">For professional developers or teams who need advanced features.</p>
<ul>
<li>Access to HTML, CSS, and JS Editor</li>
<li>Advanced Syntax Highlighting</li>
<li>5 GB Cloud Storage</li>
<li>Priority Support</li>
<li>Team Collaboration</li>
</ul>
<button class="cta-button">Choose Plan</button>
</div>
</div>
</div>
<!-- Enterprise Plan -->
<div class="col-md-4 mb-4">
<div class="pricing-card">
<div class="pricing-header">
<h3>Enterprise Plan</h3>
<p class="pricing-price">R799/month</p>
</div>
<div class="card-body">
<p class="pricing-description">For large teams and businesses with all premium features and custom solutions.</p>
<ul>
<li>Access to HTML, CSS, and JS Editor</li>
<li>Premium Syntax Highlighting</li>
<li>Unlimited Cloud Storage</li>
<li>24/7 Dedicated Support</li>
<li>Customizable Workspace</li>
<li>API Access & Integrations</li>
</ul>
<button class="cta-button">Choose Plan</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>