-
Notifications
You must be signed in to change notification settings - Fork 0
/
upsell.html
137 lines (134 loc) · 6.85 KB
/
upsell.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
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Campaign</title>
<meta name="referrer" content="no-referrer-when-downgrade" />
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body class="d-flex flex-column h-100 bg-checkout">
<div class="bg-danger">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col text-center text-white p-2 ">
Special Offer Unlocked - <span class="fw-bold">Do Not Close This Page</span>
</div>
</div>
</div>
</div>
<div class="topbar py-3 py-lg-4">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-md-5 d-flex justify-content-center justify-content-md-start align-items-center">
<div class="logo">
<img src="img/logo.png" alt="Example Campaign" class="img-fluid">
</div>
</div>
<div class="col-md-7 d-flex justify-content-center justify-content-md-end align-items-center">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item is-complete"><span>CHECKOUT</span></li>
<li class="breadcrumb-item is-current">UPGRADES</li>
<li class="breadcrumb-item">SUMMARY</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<section class="main h-100">
<div class="container-fluid">
<div class="row ">
<div class="col text-center py-5">
<div class="pb-5">
<p class="h2 fw-bold text-dark"><span>Wait! Exclusive Offer To Complement Your Order!</span> </p>
<p class="h6">Upsell Product Example</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-11">
<div class="row up-box bg-white">
<div class="col-lg-6 py-4 px-0 p-lg-4">
<div class="text-center">
<div class="fw-bold fs-5">
Flash Sale - Save 50% Off Today Only
</div>
<div class="mt-3 py-3 fw-bold fs-4 border-top border-bottom text-secondary"><span class="fs-2 text-dark">Upsell Product Example</span><br>simply random text</div>
<div class="d-lg-none text-center">
<img src="img/up1.png" class="img-fluid">
</div>
<ul class="up-list my-3">
<li>The standard chunk of Lorem Ipsum</li>
<li>Contrary to popular belief, Lorem Ipsum</li>
<li>Lorem Ipsum has been the industry's</li>
<li>Lorem Ipsum is simply dummy text</li>
</ul>
<div class="up-prcBox d-flex justify-content-center align-items-center">
<div class="prc-bx ret-prc p-3 border-end">
<div class="fs-7">Retail Price</div>
<span class="originalPrice fs-1 fw-bold text-muted">$60.00</span>
</div>
<div class="prc-bx ofr-prc p-3">
<div class="fs-7">Offer Price</div>
<span style="color:#000;" class="currentPrice fs-1 fw-bold">$30.00</span>
</div>
</div>
<div class="clearall"></div>
<div class="row justify-content-center">
<div class="col-11 col-sm-9">
<div class="mb-3 d-grid">
<button type="button" class="btn btn-lg btn-success py-3 px-5" data-loading-text='Processing' data-text='Yes! Add To My Order!'>
Yes! Add To My Order!
</button>
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-center mb-3">
Free Shipping In The Same Order
</div>
</div>
</div>
<div class="col-lg-6 d-none border-start d-lg-flex justify-content-lg-center align-items-lg-center">
<div class="text-center ">
<img src="img/up1.png" class="img-fluid">
</div>
</div>
</div>
<div class="row justify-content-center py-3">
<div class="col py-2">
<a href="#" class="d-flex justify-content-center align-items-center text-secondary upsell-no"> No thank you, I don’t want to take advantage of this one-time offer </a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer mt-auto">
<div class="container pt-4 pb-5">
<div class="row">
<div class="col-12 mt-3 pt-2 text-center footer-copyright d-flex flex-column flex-sm-row justify-content-between align-items-center">
<div class="mb-4 mb-sm-0 fs-8 text-light">
©2023 <span class="text-secondary">Example Campaign </span>. All Rights Reserved.
</div>
</div>
</div>
</div>
</footer>
</body>
<script type="text/javascript">
const publicKey = "HJiDgB1BcNDWx0lJYvP79mqDeRN8d0EVN9DfqYLv";
const nextURL = "/thank-you.html";
const refId = sessionStorage.getItem('ref_id');
const upsellLineItem = [{
"package_id": 5,
"quantity": 1
}]
</script>
<script type="text/javascript" src="js/campaign.js"></script>
<script type="text/javascript" src="js/upsell.js"></script>
</html>