Skip to content

Instantly share code, notes, and snippets.

@xapss

xapss/index.html

Created November 21, 2018 13:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xapss/49a711de5ad123dc72d508fa9d6eb8d7 to your computer and use it in GitHub Desktop.
Save xapss/49a711de5ad123dc72d508fa9d6eb8d7 to your computer and use it in GitHub Desktop.
Download ZIP
PxEqoY
Raw
index.html
<!DOCTYPE html>
<html>
<head><base href="https://app.instapage.com/">
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Customize your snack</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Your email" />
<meta property="og:description" content="Format2" />
<meta property="og:site_name" content="Your email" />
<meta property="og:url" content="http://www.getjustsnacks.com/47/customize" />
<!-- F_INSTAPAGE[dynamic_text_replacement] -->
<!-- font injector -->
<link type="text/css" rel="stylesheet" media="screen, print" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
<link type="text/css" rel="stylesheet" media="screen, print" href="//fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic" /><!-- end -->
<style type="text/css" media="screen">
.page-element .btn,
.page-element .contents,
.page-element.widget-form form,
.page-element.widget-form form input,
.page-element.widget-form form textarea,
.page-element.widget-form form select,
.page-element.widget-form form label
{
font-family: Open Sans;
font-weight: inherit;
}
.page-element.widget-headline .contents h1,
.page-element.widget-headline .contents h2,
.page-element.widget-headline .contents h3,
.page-element.widget-headline .contents h4,
.page-element.widget-headline .contents h5,
.page-element.widget-headline .contents h6
{
font-family: Open Sans;
font-weight: inherit;
}
[id^=___plusone] { width:51px !important; }
div.social.lines [id^=___plusone] { width:62px !important; }
div.social.lines span[class^=IN-widget] { min-width:70px !important; }
div.social.buttons [id^=___plusone] { width:36px !important; }
div.social.buttons div[class^=fb-like] { width:58px !important; }
div.social.tiles [id^=___plusone] { height:63px !important; margin-top: 2px !important; }
div.social.tiles .fb-like iframe { margin-top: 1px !important; }
.widget-testimonial.style-1 .contents div.testimonial-text
{
margin-top: 0;
}
@media screen and (max-width: 768px)
{
.notification > .notification-inner
{
width: auto;
position: fixed;
top: 40%;
left: 1em !important;
right: 1em !important;
font-size: 24px;
}
}
.page.page2.mobile .page-block
{
width: 600px;
}
/* Safari only fix */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
{
.widget-form .select-outer select
{
padding-left: 10px;
}
.widget-form.mobile-form .select-outer select
{
padding-left: 10px;
}
}}
</style>
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/instapage-app-assets/f2468a125779d4e85588dcb14226b8429f3004da/pageserver.page2.289618503fe52f8cec7bd105150bcdea.css" />
<script>__a_o__ = {"hasPopup":false,"isMobile":false};function getOption(k, v) { return __a_o__[k] || v; }</script>
<script type="text/javascript" src="https://storage.googleapis.com/instapage-app-assets/f2468a125779d4e85588dcb14226b8429f3004da/pageserver.page2.es5.757ed1c91fd9e4f8d398.bundle.js"></script>
<script type="text/javascript" class="instapage-noscrap">
window.__page_id = 12578121;
window.__version = 22;
window.__variant = 'A';
window.__variant_custom_name = '' || 'A';
window.__is_tablet = false;
window.__page_domain = '//www.getjustsnacks.com';
window.__instapage_services = '//app.instapage.com';
window.__instapage_proxy_services = 'PROXY_SERVICES';
window.__preview = true;
window.__facebook = false;
window.__page_type = 2;
window.__mobile_version = false;
window.__variant_hash = "8f8ed426eeaf8433a524bd42744d10e0f25ebb05";
window.__predator_throttle = 10;
window.__predator_blacklist = [];
window.__google_tab_manager_id = "false";
window.__facebook_pixel_id = "false";
window.__munchkin_snippet = "false";
window.__instapage_submission_endpoint = '//d.fastcdn.co/submissions';
var page_version = 22;
var _Translate = new Translate();
if( ijQuery === 'undefined' )
{
var ijQuery = jQuery;
}
window.__recaptchaError = function()
{
console.error( 'ReCaptcha invalid site key' );
window.__reCaptchaCorrupted = true;
};
window.__removeReCaptchaClasses = function()
{
var challengeContainer = document.querySelector( 'iframe[src*="recaptcha"]' );
var htmlDocument = document.querySelector( 'html' );
htmlDocument.classList.remove( 'hasRecaptcha' );
if( challengeContainer && challengeContainer.parentNode ) {
challengeContainer.parentNode.classList.remove( 'recaptchaContainer' );
challengeContainer.parentNode.parentNode.classList.remove( 'recaptchaWrapper' );
}
}
window.__changeReCaptchaChallengePosition = function()
{
var challengeContainer = document.querySelector( 'iframe[src*="recaptcha/api2/bframe"]' );
if ( challengeContainer && challengeContainer.parentNode )
{
try
{
var isSafari = navigator.vendor && navigator.vendor.indexOf( 'Apple' ) > -1 &&
navigator.userAgent && !navigator.userAgent.match( 'CriOS' );
var isiOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if(isSafari && isiOS) {
var interval = setInterval(function() {
var currentContainer = document.querySelector( 'iframe[src*="recaptcha/api2/bframe"]' );
if ( !currentContainer ) {
clearInterval(interval);
return;
}
var challengeContainerWrapper = currentContainer.parentNode;
var isContainerVisible = challengeContainerWrapper && challengeContainerWrapper.parentNode.style.visibility === 'visible';
if (isContainerVisible) {
var htmlDocument = document.querySelector('html');
htmlDocument.classList.add('hasRecaptcha');
currentContainer.parentNode.classList.add('recaptchaContainer');
currentContainer.parentNode.parentNode.classList.add('recaptchaWrapper');
clearInterval(interval);
}
}, 300);
}
challengeContainer.parentNode.style.position = 'fixed';
challengeContainer.parentNode.style.margin = '0 auto';
}
catch( e )
{
}
}
}
window.__reCaptchaTrigger = function( token )
{
_form_controller.onRecaptchaFormSubmit( token );
window.__removeReCaptchaClasses();
};
ijQuery(document).ready(function()
{
window._Mobile_helper = new MobileHelper();
window._Mobile_helper.initViewport( 960, true );
try
{
ijQuery('input, textarea').placeholder();
}
catch( e )
{
}
});
ijQuery( window ).load( function()
{
var notification_loader;
ijQuery( 'body' ).hide().show();
notification_loader = ijQuery( '.notification-loader' );
notification_loader.attr( 'src', notification_loader.attr( 'rel' ) );
});
_Translate.set( "Problem loading google map", "Problem loading google map" );
is_new_mobile_visible = function()
{
if( !window.matchMedia )
{
return false;
}
return window.matchMedia('screen and (max-width: 620px), screen and (max-width: 999px) and (-webkit-min-device-pixel-ratio: 1.5)').matches;
}
</script>
<style type="text/css">
html
{
height: 100%;
};
</style>
<script type="text/javascript" >
setTimeout(function()
{
"use strict";
try
{
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
html.style.setProperty( 'height', height + 'px' );
}
catch( e )
{
}
}, 1 );
</script>
<style type="text/css">
body
{
background-color: #ffffff;
background-position: top left;
background-repeat: repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.page .page-block .block-inner { background-color: transparent; }
</style>
<style type="text/css">
#element-183
{
height: 551px;
width: 573px;
left: 192px;
top: 298px;
z-index: 3;
}
#element-184
{
height: 248px;
width: 573px;
left: 193px;
top: 283px;
z-index: 4;
}
#element-185
{
height: 35px;
width: 35px;
left: 75px;
top: 130px;
z-index: 5;
}
#element-185 img
{
width: 35px;
height: 35px;
}
#element-4
{
height: 123px;
width: 177px;
left: 192px;
top: 298px;
z-index: 6;
}
#element-1
{
height: 82px;
width: 109px;
left: 226px;
top: 306px;
z-index: 7;
}
#element-1 img
{
width: 109px;
height: 82px;
}
#element-3
{
height: 26px;
width: 177px;
left: 192px;
top: 388px;
z-index: 8;
}
#element-3 p, #element-3 ul, #element-3 ol, #element-3 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-9
{
height: 123px;
width: 177px;
left: 192px;
top: 440px;
z-index: 10;
}
#element-11
{
height: 82px;
width: 109px;
left: 226px;
top: 448px;
z-index: 11;
}
#element-11 img
{
width: 109px;
height: 82px;
}
#element-13
{
height: 26px;
width: 177px;
left: 192px;
top: 530px;
z-index: 12;
}
#element-13 p, #element-13 ul, #element-13 ol, #element-13 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-58
{
height: 123px;
width: 177px;
left: 192px;
top: 582px;
z-index: 14;
}
#element-60
{
height: 82px;
width: 109px;
left: 226px;
top: 590px;
z-index: 15;
}
#element-60 img
{
width: 109px;
height: 82px;
}
#element-62
{
height: 26px;
width: 177px;
left: 192px;
top: 672px;
z-index: 16;
}
#element-62 p, #element-62 ul, #element-62 ol, #element-62 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-65
{
height: 123px;
width: 177px;
left: 192px;
top: 726px;
z-index: 18;
}
#element-67
{
height: 82px;
width: 109px;
left: 226px;
top: 734px;
z-index: 19;
}
#element-67 img
{
width: 109px;
height: 82px;
}
#element-69
{
height: 26px;
width: 177px;
left: 192px;
top: 816px;
z-index: 20;
}
#element-69 p, #element-69 ul, #element-69 ol, #element-69 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-76
{
height: 123px;
width: 177px;
left: 390px;
top: 298px;
z-index: 22;
}
#element-78
{
height: 82px;
width: 109px;
left: 424px;
top: 306px;
z-index: 23;
}
#element-78 img
{
width: 109px;
height: 82px;
}
#element-80
{
height: 26px;
width: 177px;
left: 390px;
top: 388px;
z-index: 24;
}
#element-80 p, #element-80 ul, #element-80 ol, #element-80 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-83
{
height: 123px;
width: 177px;
left: 390px;
top: 440px;
z-index: 26;
}
#element-85
{
height: 82px;
width: 109px;
left: 424px;
top: 448px;
z-index: 27;
}
#element-85 img
{
width: 109px;
height: 82px;
}
#element-87
{
height: 26px;
width: 177px;
left: 390px;
top: 530px;
z-index: 28;
}
#element-87 p, #element-87 ul, #element-87 ol, #element-87 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-90
{
height: 123px;
width: 177px;
left: 390px;
top: 582px;
z-index: 30;
}
#element-92
{
height: 82px;
width: 109px;
left: 424px;
top: 590px;
z-index: 31;
}
#element-92 img
{
width: 109px;
height: 82px;
}
#element-94
{
height: 26px;
width: 177px;
left: 390px;
top: 672px;
z-index: 32;
}
#element-94 p, #element-94 ul, #element-94 ol, #element-94 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-97
{
height: 123px;
width: 177px;
left: 390px;
top: 726px;
z-index: 34;
}
#element-99
{
height: 82px;
width: 109px;
left: 424px;
top: 734px;
z-index: 35;
}
#element-99 img
{
width: 109px;
height: 82px;
}
#element-101
{
height: 26px;
width: 177px;
left: 390px;
top: 816px;
z-index: 36;
}
#element-101 p, #element-101 ul, #element-101 ol, #element-101 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-105
{
height: 123px;
width: 177px;
left: 588px;
top: 298px;
z-index: 38;
}
#element-107
{
height: 82px;
width: 109px;
left: 622px;
top: 306px;
z-index: 39;
}
#element-107 img
{
width: 109px;
height: 82px;
}
#element-109
{
height: 26px;
width: 177px;
left: 588px;
top: 388px;
z-index: 40;
}
#element-109 p, #element-109 ul, #element-109 ol, #element-109 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-112
{
height: 123px;
width: 177px;
left: 588px;
top: 440px;
z-index: 42;
}
#element-114
{
height: 82px;
width: 109px;
left: 622px;
top: 448px;
z-index: 43;
}
#element-114 img
{
width: 109px;
height: 82px;
}
#element-116
{
height: 26px;
width: 177px;
left: 588px;
top: 530px;
z-index: 44;
}
#element-116 p, #element-116 ul, #element-116 ol, #element-116 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-119
{
height: 123px;
width: 177px;
left: 588px;
top: 582px;
z-index: 46;
}
#element-121
{
height: 82px;
width: 109px;
left: 622px;
top: 590px;
z-index: 47;
}
#element-121 img
{
width: 109px;
height: 82px;
}
#element-123
{
height: 26px;
width: 177px;
left: 588px;
top: 672px;
z-index: 48;
}
#element-123 p, #element-123 ul, #element-123 ol, #element-123 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-126
{
height: 123px;
width: 177px;
left: 588px;
top: 726px;
z-index: 50;
}
#element-128
{
height: 82px;
width: 109px;
left: 622px;
top: 734px;
z-index: 51;
}
#element-128 img
{
width: 109px;
height: 82px;
}
#element-130
{
height: 26px;
width: 177px;
left: 588px;
top: 816px;
z-index: 52;
}
#element-130 p, #element-130 ul, #element-130 ol, #element-130 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-131
{
height: 116px;
width: 487px;
left: 235px;
top: 83px;
z-index: 53;
}
#element-131 p, #element-131 ul, #element-131 ol, #element-131 h1
{
font-size: 36px;
color: rgb(55, 70, 90);
line-height: 58px;
text-align: left;
}
#element-133
{
height: 58px;
width: 370px;
left: 307px;
top: 199px;
z-index: 54;
}
#element-133 p, #element-133 ul, #element-133 ol, #element-133 h1
{
font-size: 36px;
color: rgb(55, 70, 90);
line-height: 58px;
text-align: left;
}
#element-135
{
height: 116px;
width: 487px;
left: 236px;
top: 163px;
z-index: 55;
}
#element-135 p, #element-135 ul, #element-135 ol, #element-135 h1
{
font-size: 36px;
color: rgb(55, 70, 90);
line-height: 58px;
text-align: left;
}
#element-138
{
height: 123px;
width: 177px;
left: 193px;
top: 314px;
z-index: 56;
}
#element-140
{
height: 82px;
width: 109px;
left: 227px;
top: 322px;
z-index: 57;
}
#element-140 img
{
width: 109px;
height: 82px;
}
#element-142
{
height: 26px;
width: 177px;
left: 193px;
top: 404px;
z-index: 58;
}
#element-142 p, #element-142 ul, #element-142 ol, #element-142 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-146
{
height: 123px;
width: 177px;
left: 391px;
top: 314px;
z-index: 60;
}
#element-148
{
height: 82px;
width: 109px;
left: 425px;
top: 322px;
z-index: 61;
}
#element-148 img
{
width: 109px;
height: 82px;
}
#element-150
{
height: 26px;
width: 177px;
left: 391px;
top: 404px;
z-index: 62;
}
#element-150 p, #element-150 ul, #element-150 ol, #element-150 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-153
{
height: 123px;
width: 177px;
left: 589px;
top: 314px;
z-index: 64;
}
#element-155
{
height: 82px;
width: 109px;
left: 623px;
top: 322px;
z-index: 65;
}
#element-155 img
{
width: 109px;
height: 82px;
}
#element-157
{
height: 26px;
width: 177px;
left: 589px;
top: 404px;
z-index: 66;
}
#element-157 p, #element-157 ul, #element-157 ol, #element-157 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#element-158
{
height: 53px;
width: 597px;
left: 181px;
top: 207px;
z-index: 67;
}
#element-158 p, #element-158 ul, #element-158 ol, #element-158 h1
{
font-size: 44px;
color: rgb(152, 160, 166);
line-height: 53px;
text-align: center;
}
#element-160
{
height: 319px;
width: 567px;
left: 196px;
top: 351px;
z-index: 68;
}
#element-159
{
height: 87px;
width: 444px;
left: 236px;
top: 398px;
z-index: 69;
}
#element-159 p, #element-159 ul, #element-159 ol, #element-159 h1
{
font-size: 21px;
color: rgb(152, 160, 166);
line-height: 29px;
text-align: center;
}
#element-162
{
height: 587px;
width: 401px;
left: 279px;
top: 510px;
z-index: 70;
}
#element-187
{
height: 52px;
width: 281px;
left: 338px;
top: 414px;
z-index: 71;
}
#element-187 p, #element-187 ul, #element-187 ol, #element-187 h1
{
font-size: 16px;
color: rgb(55, 70, 90);
line-height: 26px;
text-align: center;
}
#page_block_header { height: 39px; }
#page_block_header .border-holder
{
background-image: none;
background-color: rgba(0,0,0,0);
background-repeat: repeat; background-position: top left;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
width: auto;
border-width: 0;
border-top-width: 0px;
border-bottom-width: 0px;
height: 39px;
}
@media only screen and (max-width: 770px) {
.border-holder {
background-attachment: scroll !important;
}
}
#page_block_header .color-overlay
{
display: none;
}
#page_block_header .block-inner
{
margin-top: 0px;
height: calc(100% + 0px);
}
#page_block_below_fold { height: 939px; }
#page_block_below_fold .border-holder
{
background-image: none;
background-color: rgba(0,0,0,0);
background-repeat: repeat; background-position: top left;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
width: auto;
border-width: 0;
border-top-width: 0px;
border-bottom-width: 0px;
height: 939px;
}
@media only screen and (max-width: 770px) {
.border-holder {
background-attachment: scroll !important;
}
}
#page_block_below_fold .color-overlay
{
display: none;
}
#page_block_below_fold .block-inner
{
margin-top: 0px;
height: calc(100% + 0px);
}
#page_block_footer { height: 682px; }
#page_block_footer .border-holder
{
background-image: none;
background-color: rgba(0,0,0,0);
background-repeat: repeat; background-position: top left;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
width: auto;
border-width: 0;
border-top-width: 0px;
border-bottom-width: 0px;
height: 682px;
}
@media only screen and (max-width: 770px) {
.border-holder {
background-attachment: scroll !important;
}
}
#page_block_footer .color-overlay
{
display: none;
}
#page_block_footer .block-inner
{
margin-top: 0px;
height: calc(100% + 0px);
}
#page-block-yrlko65786b { height: 1302px; }
#page-block-yrlko65786b .border-holder
{
background-image: none;
background-color: #ffffff;
background-repeat: repeat; background-position: top left;
-moz-background-size:cover;
-o-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
width: auto;
border-width: 0;
border-top-width: 0px;
border-bottom-width: 0px;
height: 1302px;
}
@media only screen and (max-width: 770px) {
.border-holder {
background-attachment: scroll !important;
}
}
#page-block-yrlko65786b .color-overlay
{
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
background-color: rgba(0,0,0,0);
opacity: 0.5;
display: block;
}
#page-block-yrlko65786b .block-inner
{
margin-top: 0px;
height: calc(100% + 0px);
}
@media
screen and (min-width: 621px) and (-webkit-max-device-pixel-ratio: 1.5),
screen and (min-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.5)
{
.new_mobile .page.page2.mobile .block-inner
{
width: 960px;
}
}
</style>
<style>
body::-webkit-scrollbar-track {
box-shadow: 0;
border-radius: 10px;
background-color: transparent; }
body::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent; }
body::-webkit-scrollbar-thumb {
box-shadow: 0;
border-radius: 10px;
background-color: #dde4ea; }
body::-webkit-scrollbar-corner {
background-color: #dde4ea; }
[commentMode="on"] .page-block .border-holder {
background-attachment: scroll !important;
}
</style></head>
<body >
<div id="i-page" class="page page2 ">
<div class="notification">
<div class="notification-overlay"></div>
<div class="notification-inner">
<img rel="//storage.googleapis.com/instapage-app-assets/img/loading_circle.svg" src="" class="loading notification-loader" alt="" />
<span class="message"></span>
</div>
</div>
<div class="page-block" id="page_block_header">
<div class="color-overlay"></div>
<div class="border-holder">
<div class="block-inner">
</div>
</div>
</div>
<div class="page-block" id="page_block_below_fold">
<div class="color-overlay"></div>
<div class="border-holder">
<div class="block-inner">
<div
class="page-element widget-container page-element-type-html widget-html "
id="element-183"
>
<div class="contents full-size-contents">
<ul class="ingredients buttons"></ul></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-4"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-1"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-3"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Cheese_GoudaYoung</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-9"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-11"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-13"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Nuts_Mixed</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-58"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-60"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-62"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Crackers_Ritz</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-65"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-67"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-69"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Fruits_Banana</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-76"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-78"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-80"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Cheese_OldCheese</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-83"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-85"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-87"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Nuts_Cashew</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-90"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-92"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-94"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Crackers_Breadsticks</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-97"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-99"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-101"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Fruits_Mixed</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-105"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-107"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-109"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Cheese_Goat</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-112"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-114"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-116"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Nuts_Almonds</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-119"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-121"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-123"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Crackers_WholeWheat</p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-126"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-128"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-130"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Fruits_Coconut</p></div>
</div>
<div
class="page-element widget-container page-element-type-headline widget-headline "
id="element-131"
>
<div class="contents"><h1><p style="line-height: 58px; font-size: 36px;"> </p><p style="text-align: center; line-height: 58px; font-size: 36px;"><b>Step 1:<br>What do you want in it?</b></p><p style="line-height: 58px; font-size: 36px;"> </p></h1></div>
</div>
<div
class="page-element widget-container page-element-type-headline widget-headline "
id="element-133"
>
<div class="contents"><h1><p style="line-height: 58px; font-size: 36px;"> </p><p style="line-height: 58px; font-size: 36px;"> Now: 2 ingredients</p><p style="line-height: 58px; font-size: 36px;"> </p></h1></div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-187"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">You can select up to 4 ingredients.<br>Try to prioritise your ingredients.</p></div>
</div>
</div>
</div>
</div>
<div class="page-block" id="page_block_footer">
<div class="color-overlay"></div>
<div class="border-holder">
<div class="block-inner">
<div
class="page-element widget-container page-element-type-html widget-html "
id="element-184"
>
<div class="contents full-size-contents">
<ul class="formats buttons"></ul></div>
</div>
<div
class="page-element widget-container page-element-type-headline widget-headline "
id="element-135"
>
<div class="contents"><h1><p style="line-height: 58px; font-size: 36px;"> </p><p style="text-align: center; line-height: 58px; font-size: 36px;"><b>Step 2:<br>What kind of packaging?</b></p><p style="line-height: 58px; font-size: 36px;"> </p></h1></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-138"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-140"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-142"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Format1<br></p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-146"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-148"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-150"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Format2<br></p></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-153"
>
<div class="box" style="width: 175px; height: 121px; background-color: #ffffff; border: 1px solid #a3bac6; border-radius: 5px 5px 5px 5px; background-repeat: repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-155"
>
<div class="contents">
<img
src="//storage.googleapis.com/instapage-user-media/c55289af/37586546-0-T---Mix-Pack-2.jpg"
style="margin-top: 0px;"
alt=""
/>
</div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-157"
>
<div class="contents"><p style="text-align: center; line-height: 26px; font-size: 16px;">Format3<br></p></div>
</div>
</div>
</div>
</div>
<div class="page-block" id="page-block-yrlko65786b">
<div class="color-overlay"></div>
<div class="border-holder">
<div class="block-inner">
<div
class="page-element widget-container page-element-type-image widget-image "
id="element-185"
>
<style type="text/css">
#element-185 .cropped
{
background-image: url('//storage.googleapis.com/instapage-user-media/c55289af/37657546-0-noun-Check-1920705.svg');
background-position: 0px 0px;
width: 35px; height:35px; background-size: 35px 44px;
}
</style>
<div class="contents">
<div class='cropped' alt=""></div>
</div>
</div>
<div
class="page-element widget-container page-element-type-headline widget-headline "
id="element-158"
>
<div class="contents"><h1><p style="text-align: center; line-height: 53px; font-size: 44px;">Your email</p></h1></div>
</div>
<div
class="page-element widget-container page-element-type-box widget-box "
id="element-160"
>
<div class="box" style="width: 565px; height: 317px; background-color: #f0f3f5; border: 1px solid rgba(0,0,0,0); border-radius: px px px px; background-repeat: repeat; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; background-position: top left;"></div>
</div>
<div
class="page-element widget-container page-element-type-text widget-text "
id="element-159"
>
<div class="contents"><p style="text-align: center; line-height: 29px; font-size: 21px;">This will be the subheadline you can edit so that prospects will understand the offer better.</p></div>
</div>
<div
class="page-element widget-container page-element-type-form widget-form "
id="element-162"
>
<style type="text/css">
#element-162 .submit-button
{
background-color: #1e88e5;
color: #ffffff;
}
#element-162 .submit-button:active
{
}
#element-162 .field-checkbox .field-element input[type=checkbox]:checked + label:before
{
background-color: #1e88e5;
border-color: #1e88e5;
}
#element-162 .field-radio .field-element label:after
{
border-color: #1e88e5;
}
#element-162 .input-holder label
{
color: #98a0a6;
}
#element-162 ::-webkit-input-placeholder
{ /* WebKit browsers */
color: #98a0a6 }
#element-162 :-moz-placeholder
{ /* Mozilla Firefox 4 to 18 */
color: #98a0a6;
}
#element-162 ::-moz-placeholder
{ /* Mozilla Firefox 19+ */
color: #98a0a6;
}
#element-162 :-ms-input-placeholder
{ /* Internet Explorer 10+ */
color: #98a0a6;
}
#element-162 label.error
{
color: #C00;
}
#element-162 input[type="text"],
#element-162 input[type="password"],
#element-162 input[type="email"],
#element-162 textarea
{
color: #000000;
background-color: #ffffff;
border-color: #f0f3f5;
}
#element-162 input::-webkit-input-placeholder
{
color: #98a0a6;
}
#element-162 input:-moz-placeholder
{
color: #98a0a6;
opacity: 1;
}
#element-162 input::-moz-placeholder
{
color: #98a0a6;
opacity: 1;
}
#element-162 input:-ms-input-placeholder
{
color: #98a0a6;
}
#element-162 select
{
color: #000000 }
#element-162 select[label-position="inside"].pristine
{
color: #98a0a6 }
#element-162 select option
{
background-color: #ffffff;
}
#element-162 select
{
border-color: #f0f3f5;
background-color: #ffffff;
}
#element-162 .dynamic-button:hover
{
background-color: #171d28;
}
#element-162 .submit-holder
{
position: relative;
}
#element-162 .dynamic-button, #element-162 .image-button
{
position: absolute;
margin: 0;
top: 69px;
left: -2px;
width: 403px;
height: 53px;
box-sizing: content-box;
line-height: 21px;
font-size: 18px;
font-weight: 700;
font-family: Roboto;
border-radius: 3px; }
</style>
<div id="element-162" class="widget-container widget-form">
<div class="contents">
<form method="post" action="https://d.fastcdn.co/submissions" class="email-form" data="instapage-form" data-wid="162">
<input type="hidden" name="variant" value="A" />
<div class="input-holder field-text">
<div class="field-element ">
<input
id="ac1b62353b56e9d806213f6bf1bb5bed-0"
type="email"
name="WW91ciBFbWFpbCBBZGRyZXNz"
value=""
placeholder="Your Email Address"
data-label-inside="Your Email Address"
class="shortnice form-input required "
/>
</div>
</div>
<div class="input-holder field-checkbox">
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1" class="field-title outside-top label-outside">Flavours</label> <div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-0" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkNoZWVzZV9Hb3VkYVlvdW5n" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-0"
name="Rmxhdm91cnM="
value="Cheese_GoudaYoung"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-0">Cheese_GoudaYoung</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-1" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkNoZWVzZV9PbGRDaGVlc2U=" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-1"
name="Rmxhdm91cnM="
value="Cheese_OldCheese"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-1">Cheese_OldCheese</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-2" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkNoZWVzZV9Hb2F0" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-2"
name="Rmxhdm91cnM="
value="Cheese_Goat"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-2">Cheese_Goat</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-3" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6Ok51dHNfTWl4ZWQ=" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-3"
name="Rmxhdm91cnM="
value="Nuts_Mixed"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-3">Nuts_Mixed</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-4" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6Ok51dHNfQ2FzaGV3" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-4"
name="Rmxhdm91cnM="
value="Nuts_Cashew"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-4">Nuts_Cashew</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-5" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6Ok51dHNfQWxtb25kcw==" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-5"
name="Rmxhdm91cnM="
value="Nuts_Almonds"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-5">Nuts_Almonds</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-6" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkNyYWNrZXJzX1JpdHo=" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-6"
name="Rmxhdm91cnM="
value="Crackers_Ritz"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-6">Crackers_Ritz</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-7" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkNyYWNrZXJzX0JyZWFkc3RpY2tz" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-7"
name="Rmxhdm91cnM="
value="Crackers_Breadsticks"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-7">Crackers_Breadsticks</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-8" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkNyYWNrZXJzX1dob2xlV2hlYXQ=" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-8"
name="Rmxhdm91cnM="
value="Crackers_WholeWheat"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-8">Crackers_WholeWheat</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-9" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkZydWl0c19CYW5hbmE=" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-9"
name="Rmxhdm91cnM="
value="Fruits_Banana"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-9">Fruits_Banana</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-10" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkZydWl0c19NaXhlZA==" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-10"
name="Rmxhdm91cnM="
value="Fruits_Mixed"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-10">Fruits_Mixed</label>
</div>
<div class="field-element ">
<input type="hidden" id="hidden-ac1b62353b56e9d806213f6bf1bb5bed-1-11" name="Rmxhdm91cnM6OklOU1RBUEFHRV9CT1g6OkZydWl0c19Db2NvbnV0" value="no" class="hidden-checkbox" />
<input
type="checkbox"
id="ac1b62353b56e9d806213f6bf1bb5bed-1-11"
name="Rmxhdm91cnM="
value="Fruits_Coconut"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-1-11">Fruits_Coconut</label>
</div>
</div>
<div class="input-holder field-radio">
<label for="ac1b62353b56e9d806213f6bf1bb5bed-2" class="field-title outside-top">Formats</label> <div class="field-element ">
<input
type="radio"
id="ac1b62353b56e9d806213f6bf1bb5bed-2-0"
name="Rm9ybWF0cw=="
value="Format1"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-2-0">Format1</label>
</div>
<div class="field-element ">
<input
type="radio"
id="ac1b62353b56e9d806213f6bf1bb5bed-2-1"
name="Rm9ybWF0cw=="
value="Format2"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-2-1">Format2</label>
</div>
<div class="field-element ">
<input
type="radio"
id="ac1b62353b56e9d806213f6bf1bb5bed-2-2"
name="Rm9ybWF0cw=="
value="Format3"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-2-2">Format3</label>
</div>
<div class="field-element ">
<input
type="radio"
id="ac1b62353b56e9d806213f6bf1bb5bed-2-3"
name="Rm9ybWF0cw=="
value="Format4"
class="required "
/>
<label for="ac1b62353b56e9d806213f6bf1bb5bed-2-3">Format4</label>
</div>
</div>
<div class="input-holder field-hidden">
<input
id="ac1b62353b56e9d806213f6bf1bb5bed-3"
type="hidden"
name="TnVtYmVyX09mX0ZsYXZvdXJz"
value="Description Goes Here"
/>
</div>
<button
class="btn submit-button button_submit dynamic-button corners "
>Send</button>
<input type="hidden" name="validation" value="Tzo4OiJzdGRDbGFzcyI6Mjp7czo2OiJmaWVsZHMiO2E6Mzp7czoxODoiWW91ciBFbWFpbCBBZGRyZXNzIjtPOjg6InN0ZENsYXNzIjoxOntzOjg6InJlcXVpcmVkIjtiOjE7fXM6ODoiRmxhdm91cnMiO086ODoic3RkQ2xhc3MiOjE6e3M6ODoicmVxdWlyZWQiO2I6MTt9czo3OiJGb3JtYXRzIjtPOjg6InN0ZENsYXNzIjoxOntzOjg6InJlcXVpcmVkIjtiOjE7fX1zOjc6ImZvcm1faWQiO3M6MzI6ImFjMWI2MjM1M2I1NmU5ZDgwNjIxM2Y2YmYxYmI1YmVkIjt9" />
<input type="hidden" name="thank-you-message" value="VGhhbmsgWW91IQ==" />
<input type="hidden" name="lpsSubmissionConfig" value="eyJhbGciOiJIUzI1NiJ9.eyJhcGkiOmZhbHNlLCJhc3luYyI6dHJ1ZSwiZG93bmxvYWRGaWxlIjpmYWxzZSwiZmllbGRzIjpbeyJkZWZhdWx0X3ZhbHVlIjoiWW91ciBFbWFpbCBBZGRyZXNzIiwiZmllbGRfaWQiOjAsImhpZGVfbGFiZWwiOmZhbHNlLCJuYW1lIjoiWW91ciBFbWFpbCBBZGRyZXNzIiwicmVxdWlyZWQiOnRydWUsInR5cGUiOiJ0ZXh0IiwidmFsdWUiOiJZb3VyIEVtYWlsIEFkZHJlc3MifSx7Im5hbWUiOiJGbGF2b3VycyIsImRlZmF1bHRfdmFsdWUiOiJEZXNjcmlwdGlvbiBHb2VzIEhlcmUiLCJ0eXBlIjoiY2hlY2tib3giLCJyZXF1aXJlZCI6dHJ1ZSwiaGlkZV9sYWJlbCI6ZmFsc2UsImZpZWxkX2lkIjoxLCJlbGVtZW50cyI6W3sibmFtZSI6IkNoZWVzZV9Hb3VkYVlvdW5nIn0seyJuYW1lIjoiQ2hlZXNlX09sZENoZWVzZSJ9LHsibmFtZSI6IkNoZWVzZV9Hb2F0In0seyJuYW1lIjoiTnV0c19NaXhlZCJ9LHsibmFtZSI6Ik51dHNfQ2FzaGV3In0seyJuYW1lIjoiTnV0c19BbG1vbmRzIn0seyJuYW1lIjoiQ3JhY2tlcnNfUml0eiJ9LHsibmFtZSI6IkNyYWNrZXJzX0JyZWFkc3RpY2tzIn0seyJuYW1lIjoiQ3JhY2tlcnNfV2hvbGVXaGVhdCJ9LHsibmFtZSI6IkZydWl0c19CYW5hbmEifSx7Im5hbWUiOiJGcnVpdHNfTWl4ZWQifSx7Im5hbWUiOiJGcnVpdHNfQ29jb251dCJ9XSwidmFsdWUiOiJGbGF2b3VycyJ9LHsibmFtZSI6IkZvcm1hdHMiLCJkZWZhdWx0X3ZhbHVlIjoiRGVzY3JpcHRpb24gR29lcyBIZXJlIiwidHlwZSI6InJhZGlvIiwicmVxdWlyZWQiOnRydWUsImhpZGVfbGFiZWwiOmZhbHNlLCJmaWVsZF9pZCI6MiwiZWxlbWVudHMiOlt7Im5hbWUiOiJGb3JtYXQxIn0seyJuYW1lIjoiRm9ybWF0MiJ9LHsibmFtZSI6IkZvcm1hdDMifSx7Im5hbWUiOiJGb3JtYXQ0In1dLCJ2YWx1ZSI6IkZvcm1hdHMifSx7ImlkIjpudWxsLCJ2YWx1ZSI6IkRlc2NyaXB0aW9uIEdvZXMgSGVyZSIsImRlZmF1bHRfdmFsdWUiOiJEZXNjcmlwdGlvbiBHb2VzIEhlcmUiLCJ0eXBlIjoiaGlkZGVuIiwicmVxdWlyZWQiOmZhbHNlLCJmaWVsZF9pZCI6MywibmFtZSI6Ik51bWJlcl9PZl9GbGF2b3VycyIsImhpZGVfbGFiZWwiOmZhbHNlfV0sImZvcm1JZCI6MTYyLCJpbnRlZ3JhdGlvbnMiOltdLCJtdWx0aXN0ZXAiOmZhbHNlLCJwYWdlIjp7ImlkIjoxMjU3ODEyMSwidmVyc2lvbiI6MTgsIm93bmVyIjoyOTQ0NTg2LCJjdXN0b21lciI6MzI4MTYxMSwiZm9sZGVyIjoyODIwOTU2fSwicmVkaXJlY3QiOmZhbHNlLCJzYXZlU3VibWlzc2lvbiI6dHJ1ZSwidGhhbmtZb3VNZXNzYWdlIjoiVGhhbmsgWW91ISIsInZhcmlhdGlvbiI6eyJpZCI6MSwibGlua2VkVmFyaWF0aW9uSWQiOjIsIm5hbWUiOiJBIiwiY3VzdG9tTmFtZSI6IkEifSwicmVDYXB0Y2hhIjpmYWxzZX0.v-U1Cb066CmjiLP7BW3xrrCyVzLludS51DYtkl0hNoQ" /> </form>
</div>
<div style="clear: both"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fb-root"></div>
<!-- visitor pixel --><!-- end -->
<script>
function getWidgetsHorizontalBoundries()
{
var $body;
var page_width;
var edges = { left: 0, right: 0 };
$body = ijQuery( 'html, body' );
page_width = ijQuery( '.block-inner' ).first().width();
ijQuery( '.page-element:visible' ).each( function( index, elem )
{
var $elem = ijQuery( elem );
var left = $elem.position().left;
var width = $elem.width();
var right = left + width;
if ( left < 0 && edges.left > left )
{
edges.left = left;
}
if ( right > page_width && edges.right < right )
{
edges.right = right;
}
} );
max = Math.max( Math.abs( edges.left ), edges.right - page_width );
return page_width + max * 2;
}
window.__workspaceWidth = getWidgetsHorizontalBoundries();
</script>
</body>
</html>
Raw
script.js
var inputs = {};
var buttons = {};
var translations = {};
// Voor iedere invoerveld zet je hier:
// Origin > Target
// Voorbeeld:
// inputs['NiceField1'] = 'HiddenField1'
inputs['NiceField1'] = 'HiddenField1'
inputs['NiceField2'] = 'HiddenField2'
// Voor iedere button zet je hier:
// Origin > Target
buttons['NiceButton1'] = 'HiddenField3'
buttons['NiceButton2'] = 'HiddenField3'
translations['Cheese_GoudaYoung'] = 'Goudse Kaas'
translations['Cheese_OldCheese'] = 'Oude Kaas'
translations['Cheese_Goat'] = 'Geitenkaas'
translations['Nuts_Mixed'] = 'Gemixde noten'
translations['Nuts_Cashew'] = 'Cashewnoten'
translations['Nuts_Almonds'] = 'Almond'
translations['Crackers_Ritz'] = 'Ritz'
translations['Crackers_Breadsticks'] = 'Breadsticks'
translations['Crackers_WholeWheat'] = 'WholeWheat'
translations['Fruits_Banana'] = 'Gedroogde banaan'
translations['Fruits_Mixed'] = 'Mixed Fruit'
translations['Fruits_Coconut'] = 'Gedroogde coconut'
translations['Format1'] = 'Formaat 1'
translations['Format2'] = 'Formaat 2'
translations['Format3'] = 'Formaat 3'
translations['Format4'] = 'Formaat 4'
$(document).ready(function () {
$('#element-4').parent().find('.page-element-type-image').each(function(){
var imgUrl = $(this).find('img').attr('src')
var name = $(this).next('.page-element-type-text')
name.hide()
name = name.text().trim()
$(this).hide()
var li = "<li data-name='"+name+"'><div style='background-image: url(\""+imgUrl+"\")'></div><span>"+translations[name]+"</li>"
$('.ingredients').append(li);
})
$('#element-140').parent().find('.page-element-type-image').each(function(){
var imgUrl = $(this).find('img').attr('src')
var name = $(this).next('.page-element-type-text')
name.hide()
name = name.text().trim()
$(this).hide()
var li = "<li data-name='"+name+"'><div style='background-image: url(\""+imgUrl+"\")'></div><span>"+translations[name]+"</li>"
$('.formats').append(li);
})
$('.page-element-type-box').hide()
$('.ingredients li').click(function(){
var name = $(this).attr('data-name')
if ($('.ingredients li.selected').length < 4) {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected')
$('input[value='+name+']').prev('input').val('no')
} else {
$(this).addClass('selected')
$('input[value='+name+']').prev('input').val('yes')
}
} else if ($(this).hasClass('selected')) {
$(this).removeClass('selected')
$('input[value='+name+']').prev('input').val('no')
} else {
$('#element-187').show().delay(2000).fadeOut('slow')
}
// overwrite count field
var count = $('.ingredients li.selected').length
$('#30bcb107b68582d12a1040a72617ab86-3').val(count)
})
$('.formats li').click(function(){
$('.formats li').removeClass('selected')
$(this).addClass('selected')
})
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
body {
font-family: Arial;
}
.buttons > li {
text-align: center;
border: 1px solid red;
border-radius: 5px;
width: 120px;
display: inline-block;
vertical-align: top;
padding: 15px;
cursor: pointer;
margin: 10px;
min-height: 180px;
}
.buttons > li:hover {
border-color: grey;
}
.buttons > li.selected {
border-color: green;
}
.buttons > li > div {
background-size: cover;
background-position: center;
width: 120px;
height: 120px;
position: relative;
}
.buttons > li.selected > div:before {
display: block;
content: '';
right: 0px;
top: 0px;
position: absolute;
-webkit-mask-image: url('//storage.googleapis.com/instapage-user-media/c55289af/37657546-0-noun-Check-1920705.svg');
mask-image: url('//storage.googleapis.com/instapage-user-media/c55289af/37657546-0-noun-Check-1920705.svg');
color: red;
width: 30px;
background-color: green;
height: 38px;
}
/* #element-183 {
width: 100% !important;
border: 1px solid red;
left: 0 !important;
right: 0 !important;
height: auto !important;
} */
#element-187 {
background-color: orange;
position: fixed;
top: 100px !important;
left: calc( 50% - 160px ) !important;
width: 300px !important;
height: auto !important;
right: auto !important;
padding: 10px;
border-radius: 5px;
display: none;
}
#element-187 p {
text-align: center !important;
color: #333 !important;
}
.field-checkbox, .field-radio {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment