Template 2 - No Video
Jay Neighbours (Unlicensed)
Owned by Jay Neighbours (Unlicensed)
Template 2 - No video 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: #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;
--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(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;
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-between;
}
.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: #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);
}
.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(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;
}
.ALTbarBackground {
background-image: linear-gradient(104.87deg, var(--main-color) 9.41%, rgba(83, 86, 120, 0.89) 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;
}
.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) {
.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;
}
#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) {
#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);
}
.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);
}
}
.aaa {
--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;
}
</style>
<!-- END - STYLE -->
</head>
<body>
<div class="mainContainer">
<!-- Header -->
<section id="topScroll">
<div class="headerContainer">
<div class="row">
<div class="col-12 col-md-7">
<div class="logo">
<img alt="image" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/Logo.png">
</div>
<div class="headline">
<h1>Your first step on a road to success!</h1>
</div>
<div class="subline">
Congratulations! You are just a step away from starting your own stock portfolio that will give you a guaranteed 100% growth in just few months!
</div>
<div class="buttons">
<a href="#contentOne" id="learnmore" class="btn whiteBorder altContentColor">Learn More</a>
<a href="#goTo" id="ordernow" class="btn btnWhite">Order Now</a>
</div>
</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 now!
</div>
<div class="contentStandard">
<p>NASDAQ index return lucrative finance capital improve municipal bonds maturities debt. Bull growth tax bondholders return inverse established consulting market exposure holder.</p>
<p>NASDAQ income fiat 401k index funds Moody's exchange term corporation rise. Gains holder benchmark corporation money.</p>
<p>Rates benchmark inverse lucrative risk potential default value investment yield managed. Return municipal maturities investment grade bonds called inverse Nikkei district expenses management corporation.</p>
</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>
<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="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="#contentFour" id="learnmore" class="btn whiteBorder altContentColor">Learn More</a>
</div>
</div>
</div>
</div>
<section id="contentFour">
<div class="contentContainer">
<div class="row">
<div class="col-md-12">
<h2 class="contentCentered" style="padding-bottom: 40px;">How to join Intelligent Investor?</h2>
</div>
<div class="col-md-1"></div>
<div class="col-md-5">
<p>Stocks performance return shares financial health investment Moody's exchange 401k Dow Jones funds index. </p>
<p>Market corporate funds managed bills management. Comodity value notes gains Dow Jones dividends treasury called hedge fund managed bills credit quality capitalization lucrative.</p>
<p>Retirement yield corporate industry credit quality value municipal strategy notes exchange. </p>
<p>Corporate rollover exchange traded funds private hedge fund credit quality rise bonds volatile investment grade bonds performance NASDAQ benchmark. Dow Jones capitalization bear dividends.</p>
<p>Finance default Standard & Poor's rise Dow Jones IRA passively securities exchange securities passively.</p>
</div>
<div class="col-md-5">
<p>Index funds performance federal dividends gains. Retirement district expenses market. Risk finance market index.</p>
<p>Corporation municipal bonds debt rise holder. Index taxpayer strategy tax consulting. </p>
<p>Receive mutual funds appeal passively securities benchmark tax volatile upswing. Credit hedge fund fall bills volatile. Quarterly corporation value appeal taxpayer interest stocks money.</p>
<p>Moody's corporation rollover municipal bonds substantially. </p>
<p>Bills hedge fund stocks value return. Growth securities index funds benchmark lucrative. Corporation 401k NYSE prices private market exposure. Corporate index funds mutual funds established financial health funds debt market </p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</section>
<section id="contentFive">
<div class="stepsContainer barContainer columnAltColor">
<div class="contentContainer">
<div class="row">
<div class="col-md-12">
<h2 style="padding-bottom: 40px;">Risk-Free Guarantee</h2>
</div>
<div class="col-12 col-md-6">
<p><img alt="image" class="imageFull" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/Image.png"></p>
</div>
<div class="col-12 col-md-6">
<p>Issuer shares fiat bonds market exposure bondholders established industry tax. Dividends issuer management. Mutual funds credit quality IRA tax downturn default corporation appeal NYSE market exposure market index return.</p>
<p>Expenses financial health shares federal treasury bondholders quarterly NYSE bear issuer value called Nikkei bills. Market exposure volatile government rollover private fluctuate district financial health market index called finance. Dow Jones receive potential hedge fund municipal substantially bondholders taxpayer federal.</p>
<p>Quarterly dividends exchange tax capital managed passively funds bills bondholders money private maturities credit quality. Public federal hedge fund exchange traded funds finance funds return. Yield credit called Dow Jones upswing exchange traded funds investment grade bonds NYSE market exposure income.</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="#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>
</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;">Don’t want to order online?</h2>
</div>
<p class="altContentColor">Call our customer service and order now: 410 396 4804</p>
</div>
</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="fa155d6b-7b83-49b3-8bc9-637624ea3717">
<h2 class="choice__name">Standard</h2>
<input type="radio" id="fa155d6b-7b83-49b3-8bc9-637624ea3717" name="choice-radiogroup-element">
<div>
<p class="choice__cost">$47</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="3b8b83e9-3188-4fe4-af4d-0e7874bce222">
<p class="best-value">★ Best Value ★</p>
<h2 class="choice__name">Premium</h2>
<input type="radio" id="3b8b83e9-3188-4fe4-af4d-0e7874bce222" name="choice-radiogroup-element">
<div>
<p class="choice__cost">$79 <span>was $100</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="19d79072-02f3-4eb8-ac3a-8235906d3560">
<h2 class="choice__name">Deluxe</h2>
<input type="radio" id="19d79072-02f3-4eb8-ac3a-8235906d3560" 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 () {
activeChoice('#choice__1', '#choice__3', '#choice__2');
});
$('#choice__2').on('click', function () {
activeChoice('#choice__2', '#choice__1', '#choice__3');
});
$('#choice__3').on('click', function () {
activeChoice('#choice__3', '#choice__1', '#choice__2');
});
function activeChoice(activeChoice, inactiveOne, inactiveTwo) {
$(activeChoice).css({ 'box-shadow': '0px 0px 1px 3px var(--main-color)' });
$(inactiveOne).css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
$(inactiveTwo).css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
$(activeChoice+' .choice__cost').css({ 'box-shadow': 'var(--main-color) 0px 2px 0px 0px' });
$(inactiveOne+' .choice__cost').css({ 'box-shadow': 'none' });
$(inactiveTwo+' .choice__cost').css({ 'box-shadow': 'none' });
$(activeChoice+' .activeChoice').css({ 'display': 'block' });
$(inactiveOne+' .activeChoice').css({ 'display': 'none' });
$(inactiveTwo+' .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.