Template 2 - Stepped
Jay Neighbours (Unlicensed)
Owned by Jay Neighbours (Unlicensed)
Template 2 - Stepped is a single-page video order form with a stepped check-out form.
Grab the code here
Included in the source code are video tutorials on how to use and update the template.
<!DOCTYPE html>
<!--
**************************************************
****************** INSTRUCTIONS ******************
**************************************************
Sources:
Color picker https://bit.ly/32Llho5
Google fonts https://fonts.google.com/
Bootstrap https://getbootstrap.com/docs/5.0/getting-started/introduction/
IMPORTANT: These videos will show you how to make
basic changes to the template. For more advanced
changes please talk to your Web Developer.
***PLEASE WATCH THE VIDEOS BEFORE EDITING THE TEMPLATE!***
Instructional videos (Average length 4min):
1. How to change choices.
Video: https://www.loom.com/share/3039bfac7ff6477f9baef25d9dbe8a37
2. How to change colors and fonts.
Video: https://www.loom.com/share/9d4d7b7b2eb940cb8ef3b95936369b7b
3. How to change images.
Video: https://www.loom.com/share/1a66c3e9377f4274b21ae1d8c328413c
4. How to change text.
Video: https://www.loom.com/share/d7284a05be5546f9b0ee23b886a3b1b5
4. How to duplicate a section.
Video: https://www.loom.com/share/8973965c0bcd47f0846a55e821b2202c
Having issues?
Email 14West support at support@14west.us
**************************************************
************ REMOVE BEFORE PUBLISHING ************
**************************************************
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Live Preview</title>
<link rel="stylesheet" type="text/css" href="live-preview.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- This should be in a header Snippet -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- END - This should be in a header Snippet -->
<!-- STYLE -->
<style>
body {
font-family: 'Roboto', sans-serif;
}
/* Vars */
:root {
--main-color: #535678;
--main-d-color: #2B2D42;
--main-width: 1050px;
--standard-bg: #f8f9fa;
--headline-color: #262626;
--headline-color-alt: #373737;
--content-color-standard: #656970;
--content-color-d-standard: #2B2B2B;
--content-color-l-standard: #7C8087;
--content-black: #000;
--headline-size: 48px;
--subline-size: 20px;
--content-size: 16px;
--content-lineheight: 24px;
--headline-height: 56px;
--content-narrow: 650px;
--alt-content-color: #fff;
--content-letter-space: 0.3px;
--btn-width: 262px;
--h2-font-size: 40px;
--h2-lineheight: 48px;
--choice-title: 32px;
--choice-price-size: 24px;
--form-font-size: 14px;
--form-line-height: 18px;
--form-letter-spacing: 1.4px;
--form-text-transform: uppercase;
--form-field-font-size: 16px;
--form-field-line-height: 24px;
--field-height: 48px;
--main-mobile-width: 90%;
--mobile-headline-size: 40px;
--mobile-headline-height: 48px;
--mobile-subline-size: 16px;
--mobile-h2-font-size: 32px;
--mobile-h2-lineheight: 40px;
}
/* Main */
.mainContainer {
width: 100%;
}
/* Header */
.headerContainer {
width: 100%;
margin: auto;
height: 620px;
background-image: linear-gradient(213.87deg, rgba(64, 67, 93, 0.669198) 10.41%, var(--main-color) 83.95%), url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/skyscrapers3.jpg');
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
}
.headline {
width: var(--main-width);
max-width: 100%;
margin: auto;
padding-left: 15px;
color: #fff;
}
.headline h1 {
font-size: var(--headline-size);
}
.subline {
width: var(--main-width);
max-width: 100%;
margin: auto;
padding-left: 15px;
color: #fff;
font-size: var(--subline-size);
}
.videoHead {
margin: auto;
width: var(--main-width);
max-width: 100%;
display: block;
margin-top: -210px;
}
/* Footer */
.footerContainer {
width: 100%;
margin: auto;
padding: 60px 20px;
color: var(--headline-color-alt);
}
.legalLinks {
padding: 0 20px;
font-weight: 600;
color: var(--main-color);
}
.promoInfo {
padding: 0 0 20px 0;
display: block;
text-transform: uppercase;
letter-spacing: 1.4px;
font-style: normal;
font-weight: normal;
}
/* Content */
.contentContainer {
width: var(--main-width);
max-width: 100%;
margin: auto;
padding: 80px 0;
}
.contentStandard p {
font-size: var(--content-size);
line-height: var(--content-lineheight);
letter-spacing: var(--content-letter-space);
}
.barContainer {
width: 100%;
margin: auto;
}
.contentHeadline {
font-size: var(--headline-size);
font-weight: bold;
line-height: var(--headline-height);
padding-bottom: 20px;
}
.contentCentered {
text-align: center;
}
.contentNarrow {
width: var(--content-narrow);
max-width: 100%;
margin: auto;
}
.barBackground {
background-image: linear-gradient(90deg, rgba(66, 98, 166, 0.0001) 10%, rgba(83, 86, 120, 0.8) 15%, var(--main-color) 30%), url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/wallst.png');
background-size: auto 100%;
background-repeat: no-repeat;
}
.btn {
padding: 10px 10px;
width: var(--btn-width);
max-width: 100%;
border-width: 2px;
border-radius: 3px;
text-transform: uppercase;
margin-top: 15px;
}
.btnColored:hover {
color: #fff;
font-weight: 600;
box-shadow: 0px 0px 3px 0px #000;
}
.whiteBorder {
border-color: #fff;
}
.altContentColor {
color: var(--alt-content-color);
}
.bgColor {
background-color: var(--alt-content-color);
}
.contentColor {
color: var(--content-color-standard);
}
.btnColored {
background-color: var(--main-color);
transition: .3s;
}
.imageFull {
width: 100%;
height: auto;
object-fit: cover;
}
.columnAltColor {
background-color: var(--standard-bg);
mix-blend-mode: normal;
}
h2 {
color: var(--headline-color);
font-size: var(--h2-font-size);
line-height: var(--h2-lineheight);
font-weight: bold;
}
.blurb-title {
padding-top: 15px;
margin-bottom: 0;
line-height: var(--content-lineheight);
}
.quotedText {
position: relative;
font-style: italic;
font-weight: bold;
font-size: 32px;
line-height: 40px;
letter-spacing: var(--content-letter-space);
padding: 40px 0 20px 0;
}
.quotedText:before {
content: '';
position: absolute;
background-image: url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/quote2.png');
background-repeat: no-repeat;
top: 0;
left: 0;
width: 93px;
height: 71px;
}
.quotedText:after {
content: '';
position: absolute;
background-image: url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/quote1.png');
bottom: 0;
right: 0;
width: 93px;
height: 71px;
background-repeat: no-repeat;
}
/* Payment Section */
#orderForm .contentContainer {
padding: 90px 70px 20px;
}
#orderForm .contentContainer > h2,
#orderForm .contentContainer > p
{
padding: 0 40px;
}
#yourDetails .contentContainer,
#yourBilling .contentContainer,
#yourPayment .contentContainer {
padding: 90px 110px 10px;
}
#yourPayment .contentContainer.lastContainer {
padding: 90px 110px 50px;
}
#yourSummary .contentContainer {
padding: 90px 110px;
}
h2.choice__name {
font-size: 32px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.2px;
}
.choicesBlock {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 40px;
}
#choice__1,
#choice__2,
#choice__3 {
width: 31%;
box-shadow: rgb(155 163 173) 0px 0px 1px 1px;
border-radius: 4px;
padding-bottom: 20px;
cursor: pointer;
position: relative;
}
#choice__1 .activeChoice,
#choice__2 .activeChoice,
#choice__3 .activeChoice {
position: absolute;
font-size: 20px;
width: 40px;
height: 40px;
color: #fff;
background-color: var(--main-color);
border-radius: 50%;
text-align: center;
padding-top: 5px;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
display: none;
}
#choice__1 .activeChoice:after,
#choice__2 .activeChoice:after,
#choice__3 .activeChoice:after {
content: '\f00c';
font-family: "FontAwesome";
}
#choice__1,
#choice__3 {
height: 310px;
}
#choice__2 {
height: auto;
}
.best-value {
text-align: center;
margin-bottom: 0;
padding: 10px 10px;
background-color: var(--main-d-color);
border-radius: 4px 4px 0 0;
margin-top: -1;
color: #fff;
font-weight: 600;
/*font-family: PingFang SC;*/
font-size: 18px;
line-height: 26px;
letter-spacing: 0.17px;
}
#choice__1 h2,
#choice__2 h2,
#choice__3 h2,
#choice__1 div,
#choice__2 div,
#choice__3 div {
text-align: center;
cursor: pointer;
}
#choice__1 h2,
#choice__2 h2,
#choice__3 h2 {
font-weight: bold;
font-size: var(--choice-title);
padding: 10px 0 6px;
margin-bottom: 0;
}
#choice__1 div,
#choice__2 div,
#choice__3 div {
font-size: var(--choice-price-size);
color: var(--main-color);
font-weight: 600;
}
#choice__1 input,
#choice__2 input,
#choice__3 input {
display: none;
}
#choice__2 div span {
font-size: 14px;
color: var(--content-color-standard);
}
#choice__1 .choice__cost,
#choice__2 .choice__cost,
#choice__3 .choice__cost {
border-bottom: 1px solid #9BA3AD;
padding-bottom: 10px;
}
#choice__1 ul,
#choice__2 ul,
#choice__3 ul {
padding: 0 20px 0 30px;
list-style: none;
cursor: pointer;
}
#choice__1 li,
#choice__2 li,
#choice__3 li {
position: relative;
font-size: 14px;
color: var(--content-color-standard);
padding-bottom: 6px;
}
#choice__1 li:before,
#choice__2 li:before,
#choice__3 li:before {
content: '\f00c';
color: var(--main-color);
font-family: "FontAwesome";
font-size: 16px;
position: absolute;
left: -20px;
top: 0px;
width: 14px;
height: 14px;
}
.choice__1,
.choice__2,
.choice__3 {
width: 100%;
}
.detailsDesc {
color: var(--content-color-standard);
}
#billing_form>div {
width: 100%;
}
#billing_form .labelForm,
#yourPayment .labelForm {
font-size: var(--form-font-size);
line-height: var(--form-line-height);
letter-spacing: var(--form-letter-spacing);
text-transform: var(--form-text-transform);
color: var(--headline-color);
padding: 6px 0;
}
#billing_form .labelForm p,
#yourPayment .labelForm p {
margin-bottom: 0;
}
#billing_form .fieldForm.form-input,
#yourPayment .fieldForm.form-input,
.accepted-credit-cards {
padding-bottom: 20px;
width: 100%;
}
#billing_form .fieldForm.form-input input,
#billing_form .fieldForm.form-input select,
#yourPayment .fieldForm.form-input input,
#yourPayment .fieldForm.form-input select,
#spreedly-number,
#spreedly-cvv {
font-size: var(--form-field-font-size);
line-height: var(--form-field-line-height);
letter-spacing: 0.3px;
color: var(--headline-color);
height: var(--field-height);
width: 100%;
padding: 0 12px;
}
.orderSummary {
padding: 30px 12px 80px;
}
#contact-agreement {
display: flex;
align-items: center;
padding: 20px 5px 0;
}
#contact-agreement label {
padding-left: 15px;
}
#contact-agreement-checkbox {
box-shadow: 0px 0px 7px 1px red;
}
.col-md-8-PaddingRight .col-md-8 {
padding-right: 20px;
}
.displayMiddle {
display: flex;
align-items: center;
justify-content: center;
}
.what_cvv_popup h3 {
text-align: center;
font-size: var(--content-size);
line-height: var(--content-lineheight);
color: var(--headline-color);
font-weight: 600;
}
#what_cvv_btn {
color: var(--main-color);
font-size: var(--form-field-font-size);
text-decoration-line: underline;
letter-spacing: 0.1px;
line-height: var(--form-line-height);
font-weight: 600;
cursor: pointer;
position: relative;
}
.what_cvv_popup:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 5px 8.7px 5px 0;
border-color: transparent #9BA3AD transparent transparent;
position: absolute;
left: -9px;
top: 50%;
transform: translateY(-50%);
}
.what_cvv_popup:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 5px 8.7px 5px 0;
border-color: transparent #fff transparent transparent;
position: absolute;
left: -7px;
top: 50%;
transform: translateY(-50%);
}
.what_cvv_popup {
position: absolute;
display: none;
justify-content: space-evenly;
border: 1px solid #9BA3AD;
border-radius: 4px;
padding: 20px;
left: calc(100% + 15px);
top: calc(100% - 102px);
background-color: #fff;
width: 430px;
max-width: 100vw;
z-index: 99;
transition: 0.3s;
}
.cvv_active {
display: flex;
}
.what_cvv_popup > div {
width: 40%;
}
.what_cvv_popup > div img {
width: 100%;
}
.dateSlash {
font-size: 26px;
display: flex;
justify-content: center;
align-items: center;
height: 48px;
}
.orderSummaryBox {
background-color: var(--standard-bg);
padding: 38px 52px;
}
.orderSummaryBox h2 {
font-size: 32px;
line-height: 40px;
font-weight: bold;
}
#order_summary_subtotal_value,
#order_summary_order_total_value,
.orderTotal {
text-align: right;
width: 100%;
display: block;
}
#yourSummary .row>div {
padding: 10px 0;
}
#yourSummary hr {
margin-top: 10px;
}
.orderTotal,
.orderTotalTitle {
color: var(--headline-color);
font-weight: 600;
font-size: 20px;
line-height: 28px;
}
#yourSummary .row {
--bs-gutter-x: 0;
}
input#submit-button {
background: var(--main-color);
background-blend-mode: lighten;
border-radius: 4px;
font-size: 16px;
line-height: 23px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #FFFFFF;
width: 260px;
height: 48px;
float: right;
margin-top: 15px;
}
#cof-agreement {
display: flex;
align-items: center;
margin-top: 48px;
}
#cof-agreement label {
padding-left: 20px;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.3px;
color: var(--content-color-d-standard);
}
input#cof-agreement-checkbox {
box-shadow: 0 0 6px 0px red;
}
.rowPadding {
padding: 0 0 35px 0;
}
/* Spacers */
.spacer100 {
height: 100px;
}
/* Steps */
.steps {
height: 80px;
}
.stepsWrapper {
width: var(--content-narrow);
max-width: 100%;
margin: auto;
padding: 70px 0;
display: flex;
justify-content: space-evenly;
align-content: center;
text-align: center;
position: relative;
}
.stepsWrapper .stepTitle {
color: var(--content-color-standard);
font-size: 14px;
padding-bottom: 10px;
}
.stepsWrapper .activeStep .stepTitle {
color: var(--main-color);
font-weight: 700;
}
.stepsWrapper .stepNumber {
color: var(--content-color-standard);
font-size: 16px;
font-weight: 700;
border: 1px solid var(--content-color-standard);
width: 30px;
height: 30px;
border-radius: 50%;
padding-top: 3px;
background-color: var(--standard-bg);
z-index: 11;
}
.stepsWrapper .activeStep .stepNumber {
color: var(--main-color);
border-color: var(--main-color);
border-width: 2px;
font-size: 18px;
width: 32px;
height: 32px;
}
.stepsWrapper .completedStep .stepNumber {
background-color: var(--headline-color-alt);
color: #fff;
}
.step1, .step2, .step3, .step4 {
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
/*position: relative;*/
cursor: pointer;
}
.step1 .stepTitle, .step2 .stepTitle,
.step3 .stepTitle, .step4 .stepTitle {
width: 100%;
}
.stepsWrapper:after/*, .step2:after, .step3:after*/ {
content: '';
position: absolute;
background-color: var(--content-color-standard);
width: calc(100% - 220px);
height: 2px;
z-index: 10;
left: 50%;
bottom: 42%;
transform: translate(-50%, 50%);
}
#nextStep {
float: right;
position: relative;
}
#nextStep:after {
content: '\f054';
position: absolute;
font-family: "FontAwesome";
right: 10px;
}
#prevStep {
float: left;
position: relative;
background-color: unset;
color: var(--main-color);
}
#prevStep:after {
content: '\f053';
position: absolute;
font-family: "FontAwesome";
left: 10px;
}
#yourPayment {
margin-top: -20px;
}
.stepText {
color: var(--main-color);
font-weight: 700;
letter-spacing: 0.101818px;
text-transform: uppercase;
font-size: 14px;
line-height: 22px;
}
#yourDetailsStep, #yourBilling {
padding-bottom: 70px;
}
#steps {
padding: 0 100px 70px;
margin-top: -16px;
}
/**
* Responsive
*/
@media only screen and (max-width: 1050px) {
.videoHead,
.subline,
.headline,
.contentContainer
{
max-width: var(--main-mobile-width);
}
}
@media only screen and (max-width: 1024px) {
.what_cvv_popup {
left: calc(100% - 262px);
top: calc(100% + 12px);
}
.what_cvv_popup:before {
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 8.7px 5px;
border-color: transparent transparent #9BA3AD transparent;
top: -9px;
left: 50%;
transform: translateX(-50%);
}
.what_cvv_popup:after {
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 8.7px 5px;
border-color: transparent transparent #fff transparent;
top: -7px;
left: 50%;
transform: translateX(-50%);
}
}
@media only screen and (max-width: 768px) {
.videoHead {
height: 65%;
margin-top: -150px;
}
.reverseColumn {
flex-direction: column-reverse;
}
.reverseColumn img {
padding-bottom: 30px;
}
.btn {
width: 100%;
}
.contentContainer {
padding: 30px 0;
text-align: left;
}
.barContainer .contentContainer,
.barContainer .contentContainer p,
p.choice__cost,
p.best-value,
.quotedText,
.barContainer.columnAltColor h2 {
text-align: center;
}
.rowPadding {
padding: 0;
}
.rowPadding > div {
padding: 0 35px 15px 35px;
}
.choicesBlock {
display: block;
}
#choice__1,
#choice__2,
#choice__3 {
width: 100%;
height: auto;
margin-bottom: 50px;
}
#choice__1 ul,
#choice__2 ul,
#choice__3 ul {
text-align: left;
}
#choice__1 li,
#choice__2 li,
#choice__3 li {
padding-left: 10px;
}
#billing_form .labelForm,
#yourPayment .labelForm,
#orderForm h2:not(h2.choice__name),
#orderForm p:not(p.choice__cost):not(p.best-value),
#yourDetails h2,
#yourDetails p,
#yourPayment h2,
#yourSummary h2
{
text-align: left;
}
#orderForm .contentContainer, #yourDetails .contentContainer, #yourBilling .contentContainer {
padding: 60px 50px 10px;
}
.contentContainer h2,
.contentContainer p
{
text-align: left;
}
.footerContainer.contentCentered p a {
display: block;
padding-bottom: 10px;
}
#yourSummary .contentContainer {
padding: 0 20px;
}
.orderSummaryBox {
padding: 30px 32px;
}
.orderSummaryBox {
text-align: left;
}
div#cof-agreement {
text-align: left;
align-items: baseline;
}
input#submit-button {
width: 100%;
}
.headerContainer {
height: 300px;
}
.headline,
.contentHeadline {
font-size: var(--mobile-headline-size);
line-height: var(--mobile-headline-height);
text-align: left;
}
.subline {
font-size: var(--mobile-subline-size);
}
.row.col-md-8-PaddingRight {
padding-right: 0;
}
.footerContainer.contentCentered {
text-align: center;
}
.steps {
height: 80px;
display: flex;
flex-wrap: wrap;
flex-flow: column-reverse;
}
input#submit-button {
height: unset;
padding: 12px;
}
#yourPayment .contentContainer,
#yourPayment .contentContainer.lastContainer {
padding: 60px 50px 10px;
}
#steps {
padding-top: 80px;
}
}
@media only screen and (max-width: 650px) {
.what_cvv_popup {
left: calc(100% - 166px);
top: calc(100% + 12px);
width: auto;
flex-wrap: wrap;
}
.what_cvv_popup > div {
width: 100%;
}
.stepsWrapper:after {
width: calc(100% - 130px);
}
}
@media only screen and (max-width: 480px) {
.videoHead {
height: 50%;
margin-top: -210px;
}
#orderForm .contentContainer, #yourDetails .contentContainer, #yourBilling .contentContainer {
padding: 60px 30px 10px;
}
#yourPayment .contentContainer,
#yourPayment .contentContainer.lastContainer {
padding: 60px 30px 10px;
}
#steps {
padding: 80px 30px 70px;
}
#yourDetailsStep, #yourBilling {
padding-bottom: 0;
}
}
@media only screen and (max-width: 400px) {
.stepsWrapper:after {
width: calc(100% - 82px);
}
}
</style>
<!-- END - STYLE -->
</head>
<body>
<div class="mainContainer">
<!-- Header -->
<section id="topScroll">
<div class="headerContainer">
<div>
<div class="headline">
<h1>The Intelligent Investor</h1>
</div>
<div class="subline">
by The Agora Companies
</div>
</div>
</div>
</section>
<!-- Video -->
<div class="videoHead">
<iframe src="https://player.vimeo.com/video/225519343" title="Video Frame" width="100%" height="560" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
</div>
<!-- Content -->
<section id="contentOne">
<div class="contentContainer">
<div class="contentNarrow">
<div class="contentHeadline contentCentered">
The only guide you need to start investing now!
</div>
<div class="contentStandard contentCentered">
<p>Finance volatile dividends Nikkei risk value corporate bonds.</p>
<p>Standard & Poor's economy finance tax Dow Jones taxpayer managed. Rates strategy inverse
treasury
taxpayer yield. Gains Dow Jones Moody's market passively retirement credit quality improve
downturn 401k bonds treasury.</p>
</div>
</div>
</div>
</section>
<div class="barContainer barBackground">
<div class="contentContainer" style="padding: 40px 0;">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6 contentStandard">
<p class="altContentColor">Interest rate market index income established bondholders benchmark
corporation appeal. Fluctuate index performance securities retirement term inverse issuer
benchmark.</p>
<a href="#contentTwo" id="learnmore" class="btn whiteBorder altContentColor">Learn More</a>
</div>
</div>
</div>
</div>
<section id="contentTwo">
<div class="contentContainer">
<div class="row">
<div class="col-md-7">
<p>Rates value maturities expenses substantially credit corporate bonds exchange traded funds
credit
quality. Fitch investment improve potential <strong>Dow Jones</strong> prices exchange
traded
funds interest rollover corporation private funds quarterly passively.</p>
<p>Hedge fund strategy index funds upswing NYSE exchange. Standard & Poor's investment
performance
growth securities bonds volatile Nikkei notes lucrative corporate bonds. </p>
<p>Bull term federal shares Nikkei retirement <strong>junk bonds</strong> volatile comodity.
</p>
<p>Passively dividends growth improve. Value performance interest rate federal return potential
term
rise NASDAQ bear government income lucrative.</p>
<p>Tax established gains money. <strong>Established hedge</strong> fund managed taxpayer
dividends
management exchange corporate bonds bills yield passively.</p>
<p><strong>Dividends substantially</strong> downturn market index. Exchange traded funds
industry
downturn mutual funds. </p>
<p><a href="#goTo" id="ordernow" class="btn btnColored altContentColor">Order Now</a></p>
</div>
<div class="col-md-1"></div>
<div class="col-md-4">
<img alt="image" class="imageFull" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/image3.png">
</div>
</div>
</div>
</section>
<section id="contentThree">
<div class="barContainer columnAltColor">
<div class="contentContainer " style="padding-bottom: 40px;">
<div class="row">
<div class="col-md-12">
<h2>
Here’s Everything You
<br> Get With Your Supscription!
</h2>
</div>
</div>
</div>
<div class="contentContainer" style="padding-top: 0;">
<div class="row rowPadding">
<div class="col-md-4">
<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Statistics%402x.png" >
<p class="blurb-title">
<strong>
Performance Interest
</strong>
</p>
<p class="contentColor contentStandard">
Corporate municipal corporation return volatile managed shares IRA established. Appeal
market index
potential comodity investment grade bonds federal NASDAQ Moody's management value
securities
taxpayer. Nikkei money holder interest.
</p>
</div>
<div class="col-md-4">
<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Thumbsup%402x.png " >
<p class="blurb-title">
<strong>
Financial Health Strategy
</strong>
</p>
<p class="contentColor contentStandard">
Bull exchange traded funds credit quality government corporation gains corporate
volatile
market
index fluctuate. Hedge fund exchange risk bear quarterly finance volatile rates. Called
appeal
exchange traded funds downturn.
</p>
</div>
<div class="col-md-4">
<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Graduation%402x.png" >
<p class="blurb-title">
<strong>
Market Notes
</strong>
</p>
<p class="contentColor contentStandard">
Investment called bonds management shares corporate federal funds financial health rates
exchange
upswing. Debt receive interest interest.
</p>
</div>
</div>
<div class="row rowPadding">
<div class="col-md-4">
<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Money%402x.png" >
<p class="blurb-title">
<strong>
Funds Benchmark
</strong>
</p>
<p class="contentColor contentStandard">
Potential investment appeal NYSE volatile industry Moody's mutual funds. Money
maturities
stocks.
Dow Jones district investment potential. Government financial health issuer mutual funds
money
federal inverse retirement taxpayer bondholders.
</p>
</div>
<div class="col-md-4">
<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Screen%402x.png" >
<p class="blurb-title">
<strong>
Bonds Management
</strong>
</p>
<p class="contentColor contentStandard">
Interest rate corporation inverse consulting. Managed bondholders IRA securities growth.
Prices
funds credit quality securities market hedge fund municipal industry corporate. Prices
debt
index
funds Moody's interest issuer expenses.
</p>
</div>
<div class="col-md-4">
<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Archive%402x.png" >
<p class="blurb-title">
<strong>
Consulting Index Funds
</strong>
</p>
<p class="contentColor contentStandard">
Capitalization income passively Standard & Poor's substantially notes index market
return
treasury
corporate maturities funds. Financial health value upswing management established market
index debt
fluctuate hedge fund public treasury default index funds.
</p>
</div>
</div>
<div class="row rowPadding">
<div class="col-md-4">
<div>
<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Mail%402x.png" >
</div>
<p class="blurb-title">
<strong>
Private credit exchange
</strong>
</p>
<p class="contentColor contentStandard">
Funds credit quality debt appeal exchange traded funds retirement dividends exchange
default.
Investment mutual funds upswing stocks quarterly passively. Strategy appeal Moody's
taxpayer
gains
rise expenses.
</p>
</div>
<div class="col-md-4">
<div>
<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Style%204/Archive%402x.png" >
</div>
<p class="blurb-title">
<strong>
Value maturities
</strong>
</p>
<p class="contentColor contentStandard">
Appeal index performance rollover district exchange improve. Capital fiat rates income
fluctuate.
Value corporate bonds capitalization rollover substantially taxpayer consulting
retirement
index
funds economy Nikkei Fitch holder mutual funds.
</p>
</div>
</div>
</div>
</div>
</section>
<div class="contentContainer">
<img alt="image" class="contentCentered imageFull" style="display: block; margin: auto;" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/stock.png">
</div>
<div class="contentContainer" style="padding-top:0;">
<div class="row">
<div class="col-md-5">
<div class="quotedText">
Access to Intelligent Advisor is normally $199 a year. For a limited time you can get it for $45
and learn all my secrets!
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<p>Rise capitalization performance NYSE securities bills. Mutual funds market funds market index
bills private interest bonds junk bonds. Yield lucrative capitalization 401k Nikkei bull market
exposure. Federal prices taxpayer dividends fiat index funds corporation credit volatile market.
</p>
<p>Money debt managed fluctuate. Credit expenses inverse fiat market investment capitalization
maturities NASDAQ. </p>
<p>Government 401k Nikkei receive corporation Standard & Poor's gains upswing bull. Investment
volatile upswing taxpayer district expenses value bonds NYSE risk. Term market yield fall
district government management dividends bull.</p>
<p>Investment market index return interest volatile government. Value called exchange rates Fitch
funds municipal. Taxpayer Fitch risk Nikkei mutual funds Dow Jones lucrative credit quality
bear. Income gains corporate bonds interest. Bondholders rollover quarterly. </p>
<p><a href="#goTo" id="ordernow" class="btn btnColored altContentColor">Order Now</a></p>
</div>
</div>
</div>
<div class="contentContainer">
<div class="row reverseColumn">
<div class="col-md-7">
<p>Rates value maturities expenses substantially credit corporate bonds exchange traded funds credit
quality. Fitch investment improve potential <strong>Dow Jones</strong> prices exchange traded
funds interest rollover corporation private funds quarterly passively.</p>
<p>Hedge fund strategy index funds upswing NYSE exchange. Standard & Poor's investment performance
growth securities bonds volatile Nikkei notes lucrative corporate bonds. </p>
<p>Bull term federal shares Nikkei retirement <strong>junk bonds</strong> volatile comodity. </p>
<p>Passively dividends growth improve. Value performance interest rate federal return potential term
rise NASDAQ bear government income lucrative.</p>
<p>Tax established gains money. <strong>Established hedge</strong> fund managed taxpayer dividends
management exchange corporate bonds bills yield passively.</p>
<p><strong>Dividends substantially</strong> downturn market index. Exchange traded funds industry
downturn mutual funds. </p>
<p><a href="#goTo" id="ordernow" class="btn btnColored altContentColor">Order Now</a></p>
</div>
<div class="col-md-1"></div>
<div class="col-md-4">
<img alt="image" class="imageFull" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/image1.png">
</div>
</div>
</div>
<div class="stepsContainer barContainer columnAltColor">
<div class="stepsWrapper">
<div class="step1 activeStep">
<div class="stepTitle">Subscription</div>
<div class="stepNumber">1</div>
</div>
<div class="step2">
<div class="stepTitle">Details</div>
<div class="stepNumber">2</div>
</div>
<div class="step3">
<div class="stepTitle">Address</div>
<div class="stepNumber">3</div>
</div>
<div class="step4">
<div class="stepTitle">Payment</div>
<div class="stepNumber">4</div>
</div>
</div>
</div>
<div id="goTo"></div>
<div class="barContainer columnAltColor">
<section id="orderForm">
<div class="contentContainer bgColor">
<h2>
Your Subscription
</h2>
<p>
Choose your subscription level from one of the options below.
</p>
<form id="choices-radiogroup" novalidate="">
<div class="choicesBlock">
<div id="choice__1">
<label class="choice__1" for="a53738bc-622d-4e35-a35a-581e398665db">
<h2 class="choice__name">Standard</h2>
<input type="radio" id="a53738bc-622d-4e35-a35a-581e398665db" name="choice-radiogroup-element">
<div>
<p class="choice__cost">$79</p>
</div>
<ul class="tick-choice">
<li>Digital subscription to Intelligent Investor for one year.</li>
</ul>
</label>
<div class="activeChoice"></div>
</div>
<div id="choice__2">
<label class="choice__2" for="7d5e3e03-8dd5-4cc7-a1b2-d6fa8c93039a">
<p class="best-value">★ Best Value ★</p>
<h2 class="choice__name">Premium</h2>
<input type="radio" id="7d5e3e03-8dd5-4cc7-a1b2-d6fa8c93039a" name="choice-radiogroup-element">
<div>
<p class="choice__cost">$149 <span>was $299</span></p>
</div>
<ul class="tick-choice">
<li>Digital subscription to Intelligent Investor for one year.</li>
<li>Print subscription to Intelligent Investor for one year. </li>
<li>4 Ways to Retire Early Bonus Report</li>
<li>The Guide to Smart Investing in Your 30s and 40s Bonus Report</li>
<li>How to Make Your First Million in a Year Bonus Report</li>
</ul>
</label>
<div class="activeChoice"></div>
</div>
<div id="choice__3">
<label class="choice__3" for="55b3a127-9b55-436b-b2f8-b6f0b3ef3f04">
<h2 class="choice__name">Deluxe</h2>
<input type="radio" id="55b3a127-9b55-436b-b2f8-b6f0b3ef3f04" name="choice-radiogroup-element">
<div>
<p class="choice__cost">$129</p>
</div>
<ul class="tick-choice">
<li>Digital subscription to Intelligent Investor for one year.</li>
<li>Print subscription to Intelligent Investor for one year. </li>
</ul>
</label>
<div class="activeChoice"></div>
</div>
</div>
</form>
</div>
</section>
<form id="billing_form">
<section id="yourDetails">
<div class="contentContainer bgColor">
<div class="row">
<div class="col-md-7">
<div id="yourDetailsStep">
<p class="stepText">
Step 2
</p>
<h2>
Enter your details
</h2>
<p class="detailsDesc">
We will use your details to get in touch with you regarding the order.
</p>
<div class="labelForm">
<label for="email">Email</label>
</div>
<div class="fieldForm form-input">
<input type="email" id="email" name="email" required placeholder="Enter your email address">
</div>
<div id="password">
<div class="labelForm form-input">
<label for="password-input">Create Your Password </label>
<p>
<span style="font-size: 12px; text-transform: none;">You'll use this password to
access and manage your subscription</span>
</p>
</div>
<div class="fieldForm form-input">
<input type="password" id="password-input" name="password" required placeholder="Enter your password">
</div>
</div>
<div class="labelForm">
<label for="billing_firstname">First Name</label>
</div>
<div class="fieldForm form-input">
<input type="text" id="billing_firstname" name="firstName" required placeholder="Enter your first name">
</div>
<div class="labelForm">
<label for="billing_lastname">Last Name</label>
</div>
<div class="fieldForm form-input">
<input type="text" id="billing_lastname" name="lastName" required placeholder="Enter your last name">
</div>
</div>
<div id="yourBilling">
<p class="stepText">
Step 3
</p>
<h2 class="addheading mob-left" id="width">
Enter your billing address
</h2>
<p class="detailsDesc">
We will need your billing details so that we can process your order.
</p>
<div class="labelForm">
<label for="billing_address_1">Address</label>
</div>
<div class="fieldForm form-input">
<input type="text" id="billing_address_1" name="address" required placeholder="Enter your address">
</div>
<div class="fieldForm form-input">
<label for="billing_address_2" style="display: none;">Address 2</label>
<input type="text" id="billing_address_2" name="address2" placeholder="Enter your address line 2">
</div>
<div class="fieldForm form-input">
<label for="billing_address_3" style="display: none;">Address 3</label>
<input type="text" id="billing_address_3" name="address3" placeholder="Enter your address line 3">
</div>
<div class="labelForm">
<label for="billing_city">City</label>
</div>
<div class="fieldForm form-input">
<input type="text" id="billing_city" name="city" required placeholder="Enter your city">
</div>
<div class="row col-md-8-PaddingRight" style="--bs-gutter-x: 0;">
<div id="billing_state_block" class="col-8 col-md-8 col-sm-8">
<div class="labelForm">
<label for="billing_state">State/Province</label>
</div>
<div class="fieldForm form-input">
<select id="billing_state" name="stateName" data-country-sourceid="billing_country" data-type="state" required>
<option value="">Select a State</option>
<foreach>
<option data-country="#SELECT_BOX.stateCountryCode#" value="#SELECT_BOX.stateCode#">#SELECT_BOX.stateName#</option>
</foreach>
</select>
</div>
</div>
<div class="col-4 col-md-4 col-sm-4">
<div class="labelForm">
<label for="billing_zip">Zip Code</label>
</div>
<div class="fieldForm form-input">
<input type="text" id="billing_zip" name="postalCode" required placeholder="11-223">
</div>
</div>
</div>
<div class="labelForm">
<label for="billing_country">Country</label>
</div>
<div class="fieldForm form-input">
<select name="countryName" required id="billing_country">
<foreach>
<option value="#SELECT_BOX.countryCode#">#SELECT_BOX.countryName#</option>
</foreach>
</select>
</div>
<div class="labelForm">
<label for="billing_phoneNumber">Phone number (Optional)</label>
</div>
<div class="fieldForm form-input">
<input type="tel" id="billing_phoneNumber" name="phoneNumber">
</div>
</div>
</div>
</div>
</div>
</section>
</form>
<form style="display: none;" id="shipping_form" novalidate>
<div id="use-billing-as-shipping-block">
<div class="form-input">
<input type="checkbox" id="use-billing-as-shipping" name="use-billing-as-shipping">
</div>
<label for="use-billing-as-shipping">Use Billing Address as Shipping Address</label>
</div>
<h3>Shipping Address</h3>
<label for="shipping_prefix">Name Prefix</label>
<div class="form-input">
<input type="text" id="shipping_prefix" name="namePrefix">
</div>
<br>
<label for="shipping_firstname">First Name</label>
<div class="form-input">
<input type="text" id="shipping_firstname" name="firstName" required>
</div>
<br>
<label for="shipping_lastname">Last Name</label>
<div class="form-input">
<input type="text" id="shipping_lastname" name="lastName" required>
</div>
<br>
<label for="shipping_address_1">Address</label>
<div class="form-input">
<input type="text" id="shipping_address_1" name="address" required>
</div>
<br>
<label for="shipping_address_2">Address 2</label>
<div class="form-input">
<input type="text" id="shipping_address_2" name="address2">
</div>
<br>
<label for="shipping_address_3">Address 3</label>
<div class="form-input">
<input type="text" id="shipping_address_3" name="address3">
</div>
<br>
<label for="shipping_company">Company</label>
<div class="form-input">
<input type="text" id="shipping_company" name="company">
</div>
<br>
<label for="shipping_zip">Zip</label>
<div class="form-input">
<input type="text" id="shipping_zip" name="postalCode" required>
</div>
<br>
<label for="shipping_city">City</label>
<div class="form-input">
<input type="text" id="shipping_city" name="city" required>
</div>
<br>
<label for="shipping_country">Country</label>
<div class="form-input">
<select name="countryName" required id="shipping_country">
<foreach>
<option value=#SELECT_BOX.countryCode#>#SELECT_BOX.countryName#</option>
</foreach>
</select>
</div>
<br>
<div id="shipping_state_block">
<label for="shipping_state">State</label>
<div class="form-input">
<select id="shipping_state" name="stateName" data-country-sourceId="shipping_country" data-type="state" required>
<option value="">Select a State</option>
<foreach>
<option data-country="#SELECT_BOX.stateCountryCode#" value=#SELECT_BOX.stateCode#>#SELECT_BOX.stateName#</option>
</foreach>
</select>
</div>
</div>
<label for="shipping_phoneNumber">Phone number</label>
<div class="form-input">
<input type="tel" id="shipping_phoneNumber" name="phoneNumber">
</div>
<br>
</form>
<section id="yourPayment">
<div class="contentContainer bgColor">
<p class="stepText">
Step 4
</p>
<h2>
Enter your payment details
</h2>
<p class="detailsDesc">
Review your order and enter your payment details to complete the purchase.
</p>
<div class="orderSummaryBox">
<h2>
Order Summary
</h2>
<div class="row order-summary">
<div class="col-6 col-md-8">
<span class="">Cart Subtotal</span>
</div>
<div class="col-6 col-md-4">
<span id="order_summary_subtotal_value"></span>
</div>
<div class="col-6 col-md-8">
<span>Order Total</span>
</div>
<div class="col-6 col-md-4">
<span id="order_summary_order_total_value"></span>
</div>
<hr>
<div class="col-6 col-md-8">
<span class="orderTotalTitle">Order Total</span>
</div>
<div class="col-6 col-md-4">
<span class="orderTotal"></span>
</div>
</div>
</div>
</div>
<div class="contentContainer bgColor lastContainer" style="padding-top: 20px;">
<div class="row">
<form id="payment-form" onsubmit='submitPaymentForm(); return false;' novalidate="">
<div id="сс-form">
<div class="col-md-7">
<h2>
Payment Method
</h2>
<!--
#ACCEPTED_CC.logos#
-->
<div class="labelForm">
<label for="full_name">Name On Card</label>
</div>
<div class="fieldForm form-input">
<input type="text" id="full_name" name="full_name" required placeholder="Enter name on card">
</div>
<div class="labelForm">
<label for="card_number">Card Number</label>
</div>
<div class="fieldForm form-input">
<div id="spreedly-number" class="iframe-input"></div>
<!--<input type="text" id="card_number" name="card_number" required
placeholder="Card Number"> -->
</div>
<div class="labelForm">
<label for="month">Expiration Date</label>
</div>
<div class="row col-md-8-PaddingRight" style="--bs-gutter-x: 0;">
<div class="col-4 col-md-3">
<div class="fieldForm form-input">
<input type="text" id="month" name="month" required maxlength="2" placeholder="MM">
</div>
</div>
<div class="col-1 col-md-1 dateSlash"><span>/</span></div>
<div class="col-4 col-md-3">
<div class="fieldForm form-input">
<label for="year" style="display: none;">Year</label>
<input type="text" id="year" name="year" required maxlength="4" placeholder="YYYY">
</div>
</div>
</div>
<div class="labelForm">
<label class="cvv" for="cvv">CVV</label>
</div>
<div class="fieldForm form-input">
<div class="row col-md-8-PaddingRight" style="--bs-gutter-x: 0;">
<div class="col-5 col-md-5">
<div id="spreedly-cvv" class="iframe-input"></div>
<!--<input type="text" id="cvv" name="cvv" required maxlength="4"
placeholder="eg. 123">-->
</div>
<div class="col-7 col-md-7 displayMiddle">
<div id="what_cvv_btn" class="drop-cvv">
What is CVV?
<div class="what_cvv_popup">
<div class="card_visa">
<h3>Visa Card</h3>
<img alt="image" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/card_visa.png">
</div>
<div class="card_master">
<h3>Master Card</h3>
<img alt="image" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/card_mastercard.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="cof-agreement">
<input type="checkbox" id="cof-agreement-checkbox" name="cof-agreement-checkbox">
<label for="cof-agreement-checkbox"> I understand my credit card credentials will be stored for
future use, and I will be charged at the rate and frequency as indicated from my selection
above, until I cancel.</label>
</div>
#VALIDATION.order_submit_error#
<input id="submit-button" type="submit" value="Place Order" disabled>
</div>
</form>
</div>
</div>
</section>
<div id="steps" class="contentContainer bgColor">
<div class="steps">
<a href="#goTo" id="prevStep" data-step="1" class="btn btnColored altContentColor">Previous step</a>
<a href="#goTo" id="nextStep" data-step="1" class="btn btnColored altContentColor">Next Step</a>
</div>
</div>
<div class="barContainer columnAltColor spacer100">
</div>
</div>
<div class="footerContainer contentCentered">
<p class="promoInfo">All sales are in US dollars | Promo Code 123456</p>
<p>© 2020 Company Name All Publishing Rights Reserved</p>
<p>Company Name | Company Address | Company Address </p>
<p>
<a class="legalLinks" href="">Terms and Conditions</a>
<a class="legalLinks" href="">Privacy Policy</a>
<a class="legalLinks" href="">Do Not Sell My Info</a>
</p>
</div>
</div>
<!-- This should be in a footer Snippet -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function () {
// Choice switcher
$('#choice__1').on('click', function () {
$('#choice__1').css({ 'box-shadow': '0px 0px 1px 3px #4262A6' });
$('#choice__2').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
$('#choice__3').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
$('#choice__1 .choice__cost').css({ 'box-shadow': 'var(--main-color) 0px 2px 0px 0px' });
$('#choice__2 .choice__cost').css({ 'box-shadow': 'none' });
$('#choice__3 .choice__cost').css({ 'box-shadow': 'none' });
$('#choice__1 .activeChoice').css({ 'display': 'block' });
$('#choice__2 .activeChoice').css({ 'display': 'none' });
$('#choice__3 .activeChoice').css({ 'display': 'none' });
});
$('#choice__2').on('click', function () {
$('#choice__2').css({ 'box-shadow': '0px 0px 1px 3px #4262A6' });
$('#choice__1').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
$('#choice__3').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
$('#choice__2 .choice__cost').css({ 'box-shadow': 'var(--main-color) 0px 2px 0px 0px' });
$('#choice__1 .choice__cost').css({ 'box-shadow': 'none' });
$('#choice__3 .choice__cost').css({ 'box-shadow': 'none' });
$('#choice__2 .activeChoice').show();
$('#choice__1 .activeChoice').hide();
$('#choice__3 .activeChoice').hide();
});
$('#choice__3').on('click', function () {
$('#choice__3').css({ 'box-shadow': '0px 0px 1px 3px #4262A6' });
$('#choice__1').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
$('#choice__2').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
$('#choice__3 .choice__cost').css({ 'box-shadow': 'var(--main-color) 0px 2px 0px 0px' });
$('#choice__1 .choice__cost').css({ 'box-shadow': 'none' });
$('#choice__2 .choice__cost').css({ 'box-shadow': 'none' });
$('#choice__3 .activeChoice').css({ 'display': 'block' });
$('#choice__1 .activeChoice').css({ 'display': 'none' });
$('#choice__2 .activeChoice').css({ 'display': 'none' });
});
// CVV info box
$('#what_cvv_btn').on('click', function() {
if($('.what_cvv_popup').hasClass('cvv_active')) {
$('.what_cvv_popup').removeClass('cvv_active');
} else {
$('.what_cvv_popup').addClass('cvv_active');
}
});
// Stepping form
$('#orderForm').show();
$('#yourDetailsStep').hide();
$('#yourBilling').hide();
$('#yourPayment').hide();
$('#prevStep').hide();
$('#submit-button').hide();
$('#yourDetails').hide();
$('#nextStep').on('click', function() {
var step = $(this).data('step');
step++;
if(step == 5) {
step--;
}
$(this).data('step', step);
if(step == 1) {
$('#yourDetailsStep').removeClass('activeStep');
$('#yourBilling').removeClass('activeStep');
$('#yourPayment').removeClass('activeStep');
$('#orderForm').show();
$('#yourDetails').hide();
$('#orderForm').addClass('activeStep');
}
if(step == 2) {
$('#orderForm').removeClass('activeStep');
$('#yourBilling').removeClass('activeStep');
$('#yourPayment').removeClass('activeStep');
$('.step1').removeClass('activeStep');
$('#orderForm').hide();
$('#yourDetailsStep').show();
$('#prevStep').show();
$('#yourDetails').show();
$('.step2').addClass('activeStep');
$('.step1').addClass('completedStep');
}
if(step == 3) {
$('#yourDetailsStep').removeClass('activeStep');
$('#orderForm').removeClass('activeStep');
$('#yourPayment').removeClass('activeStep');
$('.step2').removeClass('activeStep');
$('#yourDetailsStep').hide();
$('#yourBilling').show();
$('.step3').addClass('activeStep');
$('.step2').addClass('completedStep');
}
if(step == 4) {
$('#yourDetailsStep').removeClass('activeStep');
$('#orderForm').removeClass('activeStep');
$('#yourBilling').removeClass('activeStep');
$('.step3').removeClass('activeStep');
$('#yourBilling').hide();
$('#nextStep').hide();
$('#yourDetails').hide();
$('#yourPayment').show();
$('#submit-button').show();
$('.step4').addClass('activeStep');
$('.step3').addClass('completedStep');
}
});
$('#prevStep').on('click', function() {
var step = $('#nextStep').data('step');
step--;
if(step == 0) {
step++;
}
$('#nextStep').data('step', step);
if(step == 1) {
$('#yourDetailsStep').removeClass('activeStep');
$('#yourBilling').removeClass('activeStep');
$('#yourPayment').removeClass('activeStep');
$('.step2').removeClass('activeStep');
$('.step2').removeClass('completedStep');
$('.step1').removeClass('completedStep');
$('#orderForm').show();
$('#yourDetailsStep').hide();
$('#yourDetails').hide();
$('.step1').addClass('activeStep');
}
if(step == 2) {
$('#orderForm').removeClass('activeStep');
$('#yourBilling').removeClass('activeStep');
$('#yourPayment').removeClass('activeStep');
$('.step3').removeClass('activeStep');
$('.step3').removeClass('completedStep');
$('.step2').removeClass('completedStep');
$('#yourDetailsStep').show();
$('#yourBilling').hide();
$('.step2').addClass('activeStep');
}
if(step == 3) {
$('#yourDetailsStep').removeClass('activeStep');
$('#orderForm').removeClass('activeStep');
$('#yourPayment').removeClass('activeStep');
$('.step4').removeClass('activeStep');
$('.step4').removeClass('completedStep');
$('.step3').removeClass('completedStep');
$('#yourBilling').show();
$('#yourPayment').hide();
$('#nextStep').show();
$('#yourDetails').show();
$('#submit-button').hide();
$('.step3').addClass('activeStep');
}
if(step == 4) {
$('#yourDetailsStep').removeClass('activeStep');
$('#orderForm').removeClass('activeStep');
$('#yourBilling').removeClass('activeStep');
$('.step3').removeClass('activeStep');
$('#yourPayment').show();
$('.step4').addClass('activeStep');
$('.step3').addClass('completedStep');
}
});
// Clicking on the numbers .step1, .step2, .step3, .step4
$('.step1').on('click', function(){
$('#nextStep').data('step', 1);
$('.step1').addClass('activeStep');
$('#orderForm').show();
$('#yourDetailsStep').hide();
$('#yourDetails').hide();
$('#yourPayment').hide();
$('#prevStep').hide();
$('#nextStep').show();
$('.step2').removeClass('activeStep');
$('.step3').removeClass('activeStep');
$('.step4').removeClass('activeStep');
$('.step1').removeClass('completedStep');
$('.step2').removeClass('completedStep');
$('.step3').removeClass('completedStep');
$('.step4').removeClass('completedStep');
});
$('.step2').on('click', function(){
$('#nextStep').data('step', 2);
$('.step2').addClass('activeStep');
$('.step1').addClass('completedStep');
$('#yourDetails').show();
$('#yourDetailsStep').show();
$('#yourBilling').hide();
$('#orderForm').hide();
$('#yourPayment').hide();
$('#prevStep').show();
$('#nextStep').show();
$('.step1').removeClass('activeStep');
$('.step3').removeClass('activeStep');
$('.step4').removeClass('activeStep');
$('.step2').removeClass('completedStep');
$('.step3').removeClass('completedStep');
$('.step4').removeClass('completedStep');
});
$('.step3').on('click', function(){
$('#nextStep').data('step', 3);
$('.step3').addClass('activeStep');
$('.step1').addClass('completedStep');
$('.step2').addClass('completedStep');
$('#yourDetails').show();
$('#yourBilling').show();
$('#orderForm').hide();
$('#yourDetailsStep').hide();
$('#yourPayment').hide();
$('#prevStep').show();
$('#nextStep').show();
$('.step1').removeClass('activeStep');
$('.step2').removeClass('activeStep');
$('.step4').removeClass('activeStep');
$('.step3').removeClass('completedStep');
$('.step4').removeClass('completedStep');
});
$('.step4').on('click', function(){
$('#nextStep').data('step', 4);
$('.step4').addClass('activeStep');
$('.step1').addClass('completedStep');
$('.step2').addClass('completedStep');
$('.step3').addClass('completedStep');
$('#yourDetails').hide();
$('#yourBilling').hide();
$('#orderForm').hide();
$('#yourDetailsStep').hide();
$('#yourPayment').show();
$('#prevStep').show();
$('#nextStep').hide();
$('.step1').removeClass('activeStep');
$('.step2').removeClass('activeStep');
$('.step3').removeClass('activeStep');
$('.step4').removeClass('completedStep');
});
});
</script>
<!-- END - This should be in a footer Snippet -->
</body>
</html>
com.atlassian.confluence.content.render.xhtml.migration.exceptions.UnknownMacroMigrationException: The macro 'html-macro' is unknown.