-
Notifications
You must be signed in to change notification settings - Fork 0
/
pricing.html
256 lines (246 loc) · 12.8 KB
/
pricing.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- * Title -->
<title>MyProduct</title>
<!-- * link -->
<link rel="stylesheet" href="./src/output.css">
<!-- * favicon -->
<link rel="shortcut icon" href="./assets/logo/Group 190.svg" type="image/x-icon">
<!-- * Js -->
<script defer src="./script/script.js"></script>
<!-- * Add day and night mode styles -->
<style>
body.day-mode {
background-color: #ffffff;
color: #22343D;
}
body.night-mode {
background-color: #1F2E35;
color: #ffffff;
}
</style>
</head>
<body id="body" class="text-text-clr">
<!-- * header start -->
<header class="px-32 pt-10 max-[435px]:pt-5 max-[435px]:px-5 ">
<!-- * navbar start -->
<nav class="flex justify-between items-center">
<div class="flex justify-between items-center gap-3">
<img src="./assets/logo/Group 190.svg" alt="">
<p class="text-3xl font-bold">Product</p>
</div>
<div class="flex justify-between items-center gap-8 max-[435px]:hidden ">
<p class="text-lg"><a href="./index.html">Product</a></p>
<p class="text-lg ">Customers</p>
<p class="font-semibold text-lg ">Pricing</p>
<p class="text-lg ">Resources</p>
<button id="openButton" class="border-solid border-2 border-[#BCD0E5] px-5 py-2 font-bold">Sign In</button>
<button id="openButtons" class=" px-5 py-2 font-bold bg-green-clr text-white-clr">Sign Up</button>
<img id="toggleModeButton" class="cursor-pointer" src="./assets/imgs/Frame 49.svg" alt="">
</div>
</nav>
<!-- * navbar end -->
<!-- * login start -->
<div id="items" class="hidden rounded-2xl ">
<div class="fixed left-[565px] top-[220px] bg-white rounded-2xl">
<div class="flex flex-col gap-5 w-96 border border-solid border-black p-8 rounded-2xl">
<div class="flex justify-end gap-20 text-3xl">
<h1 class="text-center font-semibold text-[34px] font-mono text-text-clr">Sign up</h1>
<span class="relative bottom-5 cursor-pointer text-text-clr" id="close">×</span>
</div>
<input class="p-2 rounded-md border border-solid border-[#ececec] outline-none" id="email" type="email" placeholder="Enter email">
<input class="p-2 rounded-md border border-solid border-[#ececec] outline-none" id="password" type="password" placeholder="Enter password">
<button class="p-2 rounded-md bg-blue-500 text-white font-mono" id="btn">Login</button>
</div>
</div>
</div>
<!-- * login end -->
</header>
<!-- * header end -->
<!-- * main start -->
<main >
<!-- * section-1 start -->
<section class="px-32 my-20 max-[435px]:my-5 max-[435px]:px-5 ">
<div class="text-center max-[435px]:my-14">
<p class="text=[30px] font-bold">PRICING</p>
<p class="text-[40px] font-bold mt-5 mb-2 max-[435px]:mt-1">Let’s get some real work done here.</p>
<p class="mb-10">Prodict is your perfect solution for working. Get started now for free</p>
</div>
<div class="flex justify-between text-text-clr max-[435px]:block ">
<div class="shadow-[1px_5px_30px_-21px_rgba(0,0,0,0.75)] rounded-xl w-[335px] h-[456px] px-10 py-8 text-center bg-white max-[435px]:w-full">
<p class="font-bold text-[24px]">Free</p>
<p>Brief price description</p>
<div class="flex justify-center items-center gap-2">
<p class="font-bold text-[76px] text-green-clr">0</p>
<div class="">
<p class="font-bold text-green-clr text-[24px]">$</p>
<p class="text-[#AFAFAF]">Per / month</p>
</div>
</div>
<p>Only 2 Op erators</p>
<p class="my-5"> Notifications</p>
<p>Landing Pages</p>
<button class="px-5 py-2 font-bold bg-green-clr mt-10 text-white-clr rounded-lg">Order Now</button>
</div>
<div class="shadow-[1px_5px_30px_-21px_rgba(0,0,0,0.75)] rounded-xl w-[335px] h-[456px] px-10 py-8 text-center bg-green-clr text-white max-[435px]:my-8 max-[435px]:w-full">
<p class="font-bold text-[24px]">Standard</p>
<p>Brief price description</p>
<div class="flex justify-center items-center gap-2">
<p class="font-bold text-[76px] ">5</p>
<div class="">
<p class="font-bold text-[24px]">$</p>
<p class="text-[#AFAFAF]">Per / month</p>
</div>
</div>
<p>5+ Operators</p>
<p class="my-5"> Notifications</p>
<p>Landing Pages</p>
<button class="px-5 py-2 font-bold bg-white mt-10 text-green-clr rounded-lg">Order Now</button>
</div>
<div class="shadow-[1px_5px_30px_-21px_rgba(0,0,0,0.75)] rounded-xl w-[335px] h-[456px] px-10 py-8 text-center bg-white max-[435px]:w-full">
<p class="font-bold text-[24px]">Premium</p>
<p>Brief price description</p>
<div class="flex justify-center items-center gap-2">
<p class="font-bold text-[76px] text-green-clr">10</p>
<div class="">
<p class="font-bold text-green-clr text-[24px]">$</p>
<p class="text-[#AFAFAF]">Per / month</p>
</div>
</div>
<p>10+ Operators</p>
<p class="my-5"> Notifications</p>
<p>Landing Pages</p>
<button class="px-5 py-2 font-bold bg-green-clr mt-10 text-white-clr rounded-lg">Order Now</button>
</div>
</div>
</section>
<!-- * section-1 end -->
<!-- * section-2 start -->
<section class="px-32 my-32 max-[435px]:my-20 max-[435px]:px-5 ">
<div class="text-center">
<p class="text-[24px] font-bold">ENTERPRISE</p>
<p class="font-bold text-[34px]">Are you interested in a custom-tailored plan?</p>
<p class="text-[18px] mt-2 mb-5">Product is a set of advanced features for really large teams with projects.</p>
<button class=" px-5 py-2 font-bold bg-green-clr text-white-clr">Get in touch with us</button>
</div>
</section>
<!-- * section-2 end -->
<!-- * section-3 start -->
<section class="px-32 my-32 max-[435px]:my-20 max-[435px]:px-5 ">
<div class="text-center mb-10">
<p class="font-bold text-[34px]">Product is being used with great effects alongside:</p>
</div>
<div class="flex justify-between max-[435px]:block">
<div>
<img src="./assets/imgs/amico-4.svg" alt="">
</div>
<div class="w-[500px] grid gap-y-10 max-[435px]:w-full">
<div >
<div class="flex gap-5 items-center">
<img src="./assets/imgs/Feature Icon with circle.svg" alt="">
<p class="font-bold text-[24px]">Enterpreneur</p>
</div>
<p>Product is a great way to help medium and samall enterprise owners achieve their goals</p>
</div>
<div >
<div class="flex gap-5 items-center">
<img src="./assets/imgs/Feature Icon with circle (1).svg" alt="">
<p class="font-bold text-[24px]">Enterpreneur</p>
</div>
<p>Product is a great way to help medium and samall enterprise owners achieve their goals</p>
</div>
<div>
<div class="flex gap-5 items-center">
<img src="./assets/imgs/Feature Icon with circle (2).svg" alt="">
<p class="font-bold text-[24px]">Enterpreneur</p>
</div>
<p>Product is a great way to help medium and samall enterprise owners achieve their goals</p>
</div>
</div>
</div>
</section>
<!-- * section-3 end -->
<!-- * section-4 start -->
<section class="px-32 my-32 max-[435px]:my-20 max-[435px]:px-5 ">
<div>
<div class="text-center mb-14">
<p class="text-[34px] font-bold mb-3">Frequently asked question</p>
<p class="text-[18px]">Something is not clear? You need help? Check our FAQ section</p>
</div>
<div class="grid gap-y-4">
<div class="flex gap-5">
<img src="./assets/imgs/plus_circle.svg" alt="">
<p class="font-semibold">What are my payment option?</p>
</div>
<div class="flex gap-5">
<img src="./assets/imgs/minus_circle.svg" alt="">
<p class="font-semibold">How can I invite collaborator to platform?</p>
</div>
<div>
<p>After creating your account you will have an oppurtunity to create your first project that will be associated withthe collaborators e-mail. An invitation will be sent automatically. Then, invited user will have to confirm his account by e-mail and finish userd onboarding.</p>
</div>
<div class="flex gap-5">
<img src="./assets/imgs/plus_circle.svg" alt="">
<p class="font-semibold">Can I upgrade my plan?</p>
</div>
<div class="flex gap-5">
<img src="./assets/imgs/plus_circle.svg" alt="">
<p class="font-semibold">Can I cancel my plan at anytime?</p>
</div>
</div>
</div>
</section>
<!-- * section-4 end -->
<!-- * section-5 start -->
<section class="px-32 my-32 max-[435px]:my-20 max-[435px]:px-5 ">
<div class="flex justify-center">
<img src="./assets/imgs/Frame 16.svg" alt="">
</div>
</section>
<!-- * section-5 end -->
</main>
<!-- * main end -->
<!-- * footer start -->
<footer class="px-32 mt-32 mb-10 max-[435px]:my-5 max-[435px]:px-5 ">
<div class="flex justify-between max-[435px]:block max-[435px]:text-center">
<div>
<div class="flex gap-3 max-[435px]:justify-center">
<img src="./assets/logo/Group 190.svg" alt="">
<p class="text-3xl font-bold">Product</p>
</div>
<div class="flex gap-3 mt-5 max-[435px]:justify-center">
<img src="./assets/logo/Group 1340.svg" alt="">
<img src="./assets/logo/Group 1342.svg" alt="">
<img src="./assets/logo/Group 1341.svg" alt="">
</div>
</div>
<div class="leading-loose">
<p class="font-bold text-[20px]">Resource</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact</p>
<p>FAQ</p>
</div>
<div class="leading-loose">
<p class="font-bold text-[20px]">Legal Stuff</p>
<p>Disclaimer</p>
<p>Financing</p>
<p>Privacy Policy</p>
<p>Terms of Service</p>
</div>
<div class="w-[300px] max-[435px]:w-full">
<p class="font-bold text-[20px]">knowing you're always on the best energy deal.</p>
<input class="block my-5 border-2 w-[300px] h-[40px] max-[435px]:w-full" type="text">
<button class=" px-5 py-2 font-bold bg-green-clr text-white-clr">Sign up Now</button>
</div>
</div>
<div class="text-center mt-10">
<p>Made With Love By Figmaland All Right Reserved</p>
</div>
</footer>
<!-- * footer end -->
</body>
</html>