-
Notifications
You must be signed in to change notification settings - Fork 2
/
trial.html
71 lines (67 loc) · 4.13 KB
/
trial.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial - TimeLancer</title>
<link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="Styles/trial.css">
</head>
<style>
</style>
<body>
<section id="body">
<div id="left">
<svg class="top-right" width="241" height="414" viewBox="0 0 241 414" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M75.7924 -4.05573L238.393 -3.42483L240.004 413.573L20.0407 172.731C1.06097 154.705 -5.19011 125.622 6.0786 107.773L75.7924 -4.05573Z" fill="#FFF5E8"></path></svg>
<svg class="bottom-left" width="265" height="567" viewBox="0 0 265 567" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M132.866 42.8213L259.877 370.045C273.739 405.76 258.502 447.003 225.843 462.163L0 567V28.1772L48.6306 5.60294C81.2895 -9.55739 119.003 7.10581 132.866 42.8213Z" fill="#F2FAFF"></path></svg>
<img src="Images/logo.jpeg" height="70px" id="logo">
<p>Start your 7-day Free Trial to Continue</p>
<div id="container">
<h4>Starter</h4>
<p class="text">All in one solution for freelancer and contractors</p>
<p class="price">$24 <span class="text2">per month</span></p>
<hr color="#ddd" size="2px" width="100%"/>
<p class="text"><i class="fa-solid fa-check"></i> All Templates</p>
<p class="text"><i class="fa-solid fa-check"></i> Unlimited Clients & Projects</p>
<p class="text"><i class="fa-solid fa-check"></i> Invoicing & Payments</p>
<p class="text"><i class="fa-solid fa-check"></i> Proposals & Contracts</p>
<p class="text"><i class="fa-solid fa-check"></i> Tasks & Time Tracking</p>
<p class="text"><i class="fa-solid fa-check"></i> Client CRM</p>
<p class="text"><i class="fa-solid fa-check"></i> Expense Tracking</p>
<p class="text"><i class="fa-solid fa-check"></i> Up to 5 Project Collaborators</p>
</div>
</div>
<div id="right">
<div id="starter-plan">
<p class="flex"><span class="bold">Starter Plan</span><span>$24</span></p>
<p id="promo" class="bold">Add Promo Code</p>
<div id="promo-box"><input type="text" placeholder="COUPON"/> <button id="promo-btn" class="bold">Apply code</button></div>
<p class="flex"><span class="bold">Due Today</span><span class="bold">$0</span></p>
<p class="flex"><span>Due in 7 days</span><span>$24</span></p>
</div>
<div id="pink-box">
<p><i class="fa-solid fa-star"></i> Cancel at anytime</p>
<p><i class="fa-solid fa-star"></i> 30 day money-back guarantee</p>
</div>
<div id="user-details">
<form>
<div class="flex relative">
<i class="fa-solid fa-user"></i>
<input type="text" id="card-holder-name" placeholder="Cardholder Name" required>
</div>
<div class="flex relative">
<i class="fa-regular fa-credit-card"></i>
<input type="number"required id="card-number"placeholder="Card Number">
</div>
<input type="submit" id="submit"value="Start Free Trial">
</form>
<p class="text2 grey"><i class="fa-solid fa-lock"></i> Guaranteed safe & secure payments</p>
</div>
</div>
<button id="close" class="bold">X</button>
</section>
</body>
</html>
<script src="Scripts/src/trial.js"></script>