Template 3 - Expanded
Jay Neighbours (Unlicensed)
Owned by Jay Neighbours (Unlicensed)
Template 3 - Expanded is a single-page 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: #106E80;
--main-d-color: #106E80;
--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: 26px;
--alt-headline-size: 32px;
--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;
--xs-mobile-headline-size: 30px;
--xs-mobile-headline-height: 38px;
--xs-mobile-subline-size: 14px;
--xs-mobile-h2-font-size: 24px;
--xs-mobile-h2-lineheight: 28px;
}
/* Main */
.mainContainer {
width: 100%;
}
/* Header */
.headerContainer {
width: 100%;
margin: auto;
height: 720px;
background-image: linear-gradient(
109.59deg
, rgb(252 253 253 / 92%) 18.42%, rgb(247 249 251 / 92%) 99.41%, rgb(252 252 252 / 92%) 99.47%), url(https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/bg_money3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.headerContainer > div {
max-width: 100%;
width: var(--main-width);
margin: auto;
}
.buttons {
padding-top: 30px;
padding-left: 15px;
display: flex;
justify-content: space-evenly;
}
.btnWhite {
background-color: var(--alt-content-color);
color: var(--main-color);
}
.headline {
width: var(--main-width);
max-width: 100%;
margin: auto;
padding-left: 15px;
color: var(--headline-color-alt);
text-align: center;
}
.headline h1 {
font-size: var(--headline-size);
font-weight: 700;
line-height: var(--headline-height);
}
.subline {
width: var(--main-width);
max-width: 100%;
margin: auto;
color: var(--main-color);
font-size: var(--subline-size);
text-align: center;
font-weight: 700;
padding: 15px 0;
}
.logo {
padding-left: 30px;
position: absolute;
top: 46px;
right: 50%;
transform: translateX(50%);
width: var(--main-width);
max-width: 100%;
}
/* 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: 40px;
}
.contentCentered {
text-align: center;
}
.contentNarrow {
width: var(--content-narrow);
max-width: 100%;
margin: auto;
}
.barBackground {
background-image: linear-gradient(90deg, rgba(16, 110, 128, 0.18) 10%, rgba(16, 110, 128, 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;
}
.ALTbarBackground {
background-image: linear-gradient(104.87deg, var(--main-color) 9.41%, rgba(16, 110, 128, 0.8) 91.52%), url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/Image%20(1).png');
background-size: cover;
background-repeat: no-repeat;
}
.btn {
padding: 10px 10px;
width: var(--btn-width);
max-width: 100%;
border-width: 2px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-top: 15px;
font-size: 16px;
line-height: 23px;
font-weight: bold;
}
.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;
}
.revBtn {
color: var(--main-color);
background-color: #fff;
border: 1px solid var(--main-color);
}
.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 20px 40px 10px;
}
.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: 100%;
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(--main-width);
max-width: 100%;
margin: auto;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.stepsWrapper .stepTitle {
color: var(--content-color-standard);
font-size: 14px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
.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: 14px;
height: 14px;
border-radius: 50%;
padding-top: 3px;
background-color: #fff;
z-index: 11;
}
.stepsWrapper .activeStep .stepNumber {
color: var(--main-color);
background-color: var(--main-color);
border-color: var(--main-color);
border-width: 2px;
font-size: 18px;
width: 14px;
height: 14px;
}
.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;
cursor: pointer;
}
.step1 .stepTitle, .step2 .stepTitle,
.step3 .stepTitle, .step4 .stepTitle {
width: 100%;
}
.stepsWrapper:after {
content: '';
position: absolute;
background-color: var(--content-color-standard);
width: calc(100% - 71px);
height: 1px;
z-index: 10;
left: 50%;
bottom: 87%;
transform: translate(-50%, 50%);
}
#nextStep {
float: right;
position: relative;
width: 100%;
}
#nextStep:after {
content: '\f054';
position: absolute;
font-family: "FontAwesome";
right: 10px;
}
#prevStep {
position: relative;
background-color: unset;
color: var(--main-color);
padding-left: 25px;
width: 100%;
text-align: left;
}
#prevStep:hover {
box-shadow: none;
}
#prevStep:after {
content: '\f053';
position: absolute;
font-family: "FontAwesome";
left: 0;
}
#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: 20px;
}
#steps {
margin-top: -16px;
}
#contentSeven .col-md-4 {
padding: 16px 20px;
}
.altBarContainer {
background-color: #fff;
padding: 200px 0;
}
.altBarContainer .barContainer {
padding: 70px 20px;
}
.paymentWrapper {
max-width: 100%;
width: var(--main-width);
margin: auto;
height: auto;
position: relative;
}
.paymentWrapper .col-md-6 {
position: relative;
}
.leftColWrapper {
padding-right: 45px;
}
.orderFormWrapper {
position: absolute;
width: 100%;
top: -240px;
left: 0;
padding-right: 20px;
}
.orderFormFields {
background-color: #fff;
padding: 30px;
border: 1px solid #bbbbbb;
border-radius: 4px;
}
.orderFormSteps {
padding: 45px 30px 18px;
}
.altHeadline {
font-size: var(--alt-headline-size);
font-weight: 700;
}
.check:before {
content: '\f00c';
font-family: "FontAwesome";
padding-right: 15px;
color: var(--main-color);
}
.callUsBox {
margin-top: 40px;
background-color: #fff;
width: 360px;
max-width: 100%;
border: 1px solid #bbbbbb;
border-radius: 4px;
box-shadow: 4px 4px 13px rgb(99 99 99 / 8%);
padding: 18px 20px;
display: flex;
align-items: center;
}
.callUsBox .fa-phone {
font-size: 36px;
color: var(--main-color);
width: 50px;
}
.callUsHeading {
font-size: 20px;
font-weight: bold;
line-height: 28px;
letter-spacing: 0.15px;
color: var(--main-color);
padding-bottom: 5px;
}
.callUsText {
font-size: var(--form-font-size);
line-height: 20px;
color: var(--headline-color);
}
.callUsText a {
font-weight: 600;
text-decoration: none;
color: var(--headline-color);
}
#orderForm {
display: none;
}
.orderFormFields h2 {
font-size: var(--choice-price-size);
}
#expand {
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--main-color);
padding: 10px 40px;
width: 300px;
border: 2px solid #ccc;
}
#longContent {
height: 0;
overflow: hidden;
visibility: hidden;
transition: 0.5s;
}
#longContent.expanded {
height: auto;
overflow: unset;
visibility: visible;
transition: 0.5s;
}
/**
* Responsive
*/
@media only screen and (max-width: 1050px) {
.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) {
.headline, .subline {
margin: unset;
}
.buttons {
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.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: 600px;
background-size: cover;
}
.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;
}
}
@media only screen and (max-width: 768px) {
.altBarContainer {
padding: 50px 0;
}
.orderFormWrapper {
position: relative;
top: 0;
padding-right: 0;
}
.callUsBox {
margin: auto;
margin-top: 40px;
}
}
@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% - 68px);
}
}
@media only screen and (max-width: 480px) {
#orderForm .contentContainer, #yourDetails .contentContainer, #yourBilling .contentContainer {
padding: 60px 30px 10px;
}
#yourPayment .contentContainer,
#yourPayment .contentContainer.lastContainer {
padding: 60px 30px 10px;
}
#yourDetailsStep, #yourBilling {
padding-bottom: 0;
}
}
@media only screen and (max-width: 400px) {
.stepsWrapper:after {
width: calc(100% - 82px);
}
.headline,
.contentHeadline {
font-size: var(--xs-mobile-headline-size);
line-height: var(--xs-mobile-headline-height);
text-align: left;
}
.subline {
font-size: var(--xs-mobile-subline-size);
}
h2, .orderSummaryBox h2 {
font-size: var(--xs-mobile-h2-font-size);
line-height: var(--xs-mobile-h2-lineheight);
}
.headline h1 {
font-size: var(--xs-mobile-headline-size);
}
}
</style>
<!-- END - STYLE -->
</head>
<body>
<div class="mainContainer">
<!-- Header -->
<section id="topScroll">
<div class="headerContainer">
<div class="row">
<div class="col-12 col-md-2"></div>
<div class="col-12 col-md-8">
<div class="subline">
The Intelligent Advisor
</div>
<div class="headline">
<h1>Get a free copy of Intelligent Investor to see how an easy trick can make you a million in less than a year!</h1>
</div>
<div class="buttons">
<a href="#contentOne" id="learnmore" class="btn revBtn">Learn More</a>
<a href="#goTo" id="ordernow" class="btn btnColored altContentColor">Order Now</a>
</div>
</div>
<div class="col-12 col-md-2"></div>
</div>
</div>
</section>
<!-- Content -->
<section id="contentOne">
<div class="contentContainer">
<div class="row">
<div class="col-md-6">
<div class="contentHeadline">
The only guide you need to start investing your money!
</div>
<div class="contentStandard">
<p>Rates value maturities expenses substantially credit corporate bonds exchange traded funds credit quality. Fitch investment improve potential Dow Jones 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 junk bonds volatile comodity. </p>
<p>Passively dividends growth improve. Value performance interest rate federal return potential term rise NASDAQ bear government income lucrative.</p>
</div>
<div id="expand" class="btn">
Continue Reading
</div>
</div>
<div class="col-md-6">
<img alt="image" class="imageFull" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/image1.png">
</div>
</div>
</div>
</section>
<div id="longContent">
<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="#goTo" id="learnmore" class="btn whiteBorder altContentColor">Order Now</a>
</div>
</div>
</div>
</div>
<section id="contentSeven">
<div class="contentContainer">
<div class="orderSummaryBox">
<div class="row">
<div class="col-md-12">
<h2 class="contentCentered" style="padding-bottom: 30px;">What others are saying…</h2>
</div>
<div class="col-md-4 contentCentered">
<p>“This approach gives me something I can actually do to plan for the future and save money for my retirement…”</p>
<p style="font-weight: 600;">- Joe</p>
</div>
<div class="col-md-4 contentCentered">
<p>“Since I read Intelligent Investor I was able to stop working my side jobs. I have more time to spend with my friends and money - and more disposable income!”</p>
<p style="font-weight: 600;">- Lucy</p>
</div>
<div class="col-md-4 contentCentered">
<p>“I absolutely love how easy it is to follow this subscription. I have used financial advisors before and found them complicated but this is great! !”</p>
<p style="font-weight: 600;">- Stephen</p>
</div>
<div class="col-md-4 contentCentered">
<p>“My wife and I finally paid off our mortgage and we already took 3 holidays this year. I might be able to quit my full time job!”</p>
<p style="font-weight: 600;">- Elijah</p>
</div>
<div class="col-md-4 contentCentered">
<p>“Few months ago I was worried how I’ll pay for my daughters tuition fees… This is not a problem anymore - I can finally sleep at night! Thank you!”</p>
<p style="font-weight: 600;">- Logan</p>
</div>
<div class="col-md-4 contentCentered">
<p>“$500 I invested last year turned into $10,000. I can’t believe this worked - I’m able to retire early!”</p>
<p style="font-weight: 600;">- James</p>
</div>
</div>
</div>
</div>
</section>
<section id="#contentSix">
<div class="contentContainer">
<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>
</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’l
<br>Get with Intelligent Investor!
</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>
</div>
</section>
<section id="contentOne">
<div class="contentContainer">
<div class="row">
<div class="col-md-6">
<div class="contentHeadline">
Increase your growth!
</div>
<div class="contentStandard">
<p>Municipal bonds bonds return appeal interest bear bull money. Receive market growth interest rate tax passively fluctuate. Holder inverse benchmark Fitch fiat consulting strategy. Corporate rise holder.</p>
<p>Government Nikkei downturn economy exchange traded funds retirement finance NYSE credit quality shares municipal yield prices holder. Credit federal corporate return shares public. </p>
<p>Public gains capital private retirement inverse appeal index funds passively receive NYSE established exchange traded funds mutual funds. Risk corporate bonds benchmark passively exchange called substantially management bonds holder NYSE funds. </p>
<p>Interest rate downturn benchmark. Fiat Nikkei 401k risk. Established bull maturities return. </p>
<p>Public mutual funds financial health treasury economy finance shares municipal bonds term investment index funds Standard & Poor's market index 401k.</p>
</div>
</div>
<div class="col-md-6">
<img alt="image" class="imageFull" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/money.png">
</div>
</div>
</div>
</section>
<div class="barContainer ALTbarBackground">
<div class="contentContainer contentCentered" style="padding: 40px 0;">
<div class="row">
<div class="col-md-12 contentStandard">
<div class="contentCentered">
<h2 class="altContentColor" style="text-align: center;">Now it’s your turn.</h2>
</div>
<p class="altContentColor">This is your chance to make money without leaving your home and securing a safer future.</p>
</div>
</div>
</div>
</div>
</div>
<div class="altBarContainer">
<div class="barContainer columnAltColor">
<div class="paymentWrapper">
<div class="row">
<div class="col-md-6">
<div class="leftColWrapper">
<div class="altHeadline">
Get Access to Intelligent Investor for only $150 a year!
</div>
<div class="contentStandard">
<p></p>
<p>You will receive:</p>
<p class="check">A copy of Intelligent Investor that retails for $200. Just pay $3.99 for shipping.</p>
<p class="check">4 Bonus Reports that help you grow your portfolio even more!</p>
<p class="check">A digital subscription to our award-winning portfolio app.</p>
<div class="callUsBox">
<i class="fa fa-phone" aria-hidden="true"></i>
<div>
<div class="callUsHeading">
Don’t want to order online?
</div>
<div class="callUsText">
Call our customer service - <a href="tel:410 396 4804">410 396 4804 </a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="orderFormWrapper">
<div class="orderFormSteps">
<div id="goTo"></div>
<div class="stepsWrapper">
<div class="step1 activeStep">
<div class="stepNumber"></div>
<div class="stepTitle">Details</div>
</div>
<div class="step2">
<div class="stepNumber"></div>
<div class="stepTitle">Address</div>
</div>
<div class="step3">
<div class="stepNumber"></div>
<div class="stepTitle">Payment</div>
</div>
<div class="step4">
<div class="stepNumber"></div>
<div class="stepTitle">Review</div>
</div>
</div>
</div>
<div class="orderFormFields">
<a href="#goTo" id="prevStep" data-step="1" class="btn btnColored altContentColor">Go Back</a>
<!-- NOT VISIBLE ON FRONTEND -->
<section id="orderForm">
<div class="bgColor">
<!-- ONE CHOICE TEMPLATE -->
<form id="choices-radiogroup" novalidate="">
<div class="choicesBlock">
<div id="choice__1">
<label class="choice__1" for="70d2773a-96dd-480a-8849-15d052844c56">
<input type="radio" id="70d2773a-96dd-480a-8849-15d052844c56" name="choice-radiogroup-element" checked="checked">
</label>
<div class="activeChoice"></div>
</div>
</div>
</form>
<!-- END CHOICE -->
</div>
</section>
<!-- END SECTION -->
<form id="billing_form">
<section id="yourDetails">
<div class="bgColor">
<div id="yourDetailsStep">
<h2>
Step 1: 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">
<h2 class="addheading mob-left" id="width">
Step 2: 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>
</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="bgColor">
<h2>
Step 3: Enter your payment details
</h2>
<p class="detailsDesc">
We need your billing address so that we can process your orders
</p>
<!--
#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>
</section>
<section id="orderReview">
<div class="bgColor lastContainer">
<form id="payment-form" onsubmit='submitPaymentForm(); return false;' novalidate="">
<div id="сс-form">
<h2>
Step 4: Review your order
</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 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" class="btn" type="submit" value="Place Order" disabled>
</div>
</form>
</div>
</section>
<div id="steps" class="bgColor">
<div class="steps">
<a href="#goTo" id="nextStep" data-step="1" class="btn btnColored altContentColor">Next Step</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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 () {
// 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');
}
});
// Expand content on click
$('#expand').on('click', function() {
if($('#longContent').hasClass('expanded')) {
$('#longContent').removeClass('expanded');
} else {
$('#longContent').addClass('expanded');
}
});
// Stepping form
$('#yourDetailsStep').show();
$('#yourBilling').hide();
$('#yourPayment').hide();
$('#orderReview').hide();
$('#prevStep').hide();
$('#nextStep').on('click', function() {
var step = $(this).data('step');
step++;
if(step == 5) {
step--;
}
$(this).data('step', step);
if(step == 1) {
$('#nextStep').hide();
}
if(step == 2) {
$('.step1').addClass('completedStep');
$('.step1').removeClass('activeStep');
$('.step2').addClass('activeStep');
$('#yourDetailsStep').hide();
$('#prevStep').show();
$('#yourBilling').show();
}
if(step == 3) {
$('.step2').addClass('completedStep');
$('.step2').removeClass('activeStep');
$('.step3').addClass('activeStep');
$('#yourBilling').hide();
$('#yourPayment').show();
}
if(step == 4) {
$('#nextStep').hide();
$('.step3').addClass('completedStep');
$('.step3').removeClass('activeStep');
$('.step4').addClass('activeStep');
$('#yourPayment').hide();
$('#orderReview').show();
}
});
$('#prevStep').on('click', function() {
var step = $('#nextStep').data('step');
step--;
if(step == 0) {
step++;
}
$('#nextStep').data('step', step);
if(step == 1) {
$('#nextStep').show();
$('.step1').addClass('activeStep');
$('.step2').removeClass('activeStep');
$('.step2').removeClass('completedStep');
$('#prevStep').hide();
$('#yourBilling').hide();
$('#yourDetailsStep').show();
}
if(step == 2) {
$('.step2').addClass('activeStep');
$('.step3').removeClass('activeStep');
$('.step3').removeClass('completedStep');
$('#yourPayment').hide();
$('#yourBilling').show();
}
if(step == 3) {
$('.step3').addClass('activeStep');
$('.step4').removeClass('activeStep');
$('#orderReview').hide();
$('#yourPayment').show();
}
if(step == 4) {
}
});
// Clicking on the numbers .step1, .step2, .step3, .step4
$('.step1').on('click', function(){
$('#nextStep').data('step', 1);
$('.step1').addClass('activeStep');
$('#yourDetailsStep').show();
$('#yourBilling').hide();
$('#yourPayment').hide();
$('#orderReview').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');
$('#yourDetailsStep').hide();
$('#yourBilling').show();
$('#yourPayment').hide();
$('#orderReview').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');
$('#yourDetailsStep').hide();
$('#yourBilling').hide();
$('#yourPayment').show();
$('#orderReview').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');
$('#yourDetailsStep').hide();
$('#yourBilling').hide();
$('#yourPayment').hide();
$('#orderReview').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.