"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class='fonts-loaded'> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ericthayer/pen/rWWpZW?limit=all&page=9&q=sms" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/in2m-styles.css" media="all"> <!-- Non-Critical CSS - loadCSS: load a CSS file asynchronously. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT --> <script> (function(a){var b=function(c,k,d){var l=a.document;var m=l.createElement("link");var e;if(k){e=k}else{var i=(l.body||l.getElementsByTagName("head")[0]).childNodes;e=i[i.length-1]}var f=l.styleSheets;m.rel="stylesheet";m.href=c;m.media="only x";function j(n){if(l.body){return n()}setTimeout(function(){j(n)})}j(function(){e.parentNode.insertBefore(m,(k?e:e.nextSibling))});var h=function(o){var n=m.href;var p=f.length;while(p--){if(f[p].href===n){return o()}}setTimeout(function(){h(o)})};function g(){if(m.addEventListener){m.removeEventListener("load",g)}m.media=d||"all"}if(m.addEventListener){m.addEventListener("load",g)}m.onloadcssdefined=h;h(g);return m};if(typeof exports!=="undefined"){exports.loadCSS=b}else{a.loadCSS=b}}(typeof global!=="undefined"?global:this));loadCSS("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/in2m-async.css");</script> <style class="cp-pen-styles">@charset "UTF-8"; @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } [data-tooltip] { position: relative; } [data-tooltip]:hover, [data-tooltip]:focus { cursor: help; } [data-tooltip]:hover:after, [data-tooltip]:focus:after { background: #ccebff; box-shadow: 0 0 0 0.25em #99d8ff, 7px 7px 0 rgba(0, 0, 0, 0.5); color: #333; padding: .5em .5em; position: absolute; top: 0; left: 1.5rem; line-height: 1; font-size: .875rem; text-align: center; -webkit-animation: fade-in .4s linear forwards; animation: fade-in .4s linear forwards; -webkit-transition: opacity .4s ease; transition: opacity .4s ease; z-index: 10000; content: attr(data-tooltip); } @media (min-width: 30em) { [data-tooltip]:hover:after, [data-tooltip]:focus:after { min-width: 8em; } } .skip-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 1.5rem; line-height: 1; max-height: 0; outline: none; overflow: hidden; position: absolute; top: 0; left: 0; text-align: center; -webkit-transition: .3s ease; transition: .3s ease; width: 100%; z-index: 1001; } .skip-link:focus { box-shadow: none; color: #FFF; max-height: 10vmax; padding-top: .5em; padding-bottom: .5em; } .clearfix:before, .clearfix:after { content: ""; display: block; clear: both; } .full-screen { min-height: 100vh; } .full-screen .banner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-top: 0; padding-bottom: 0; } .list-unstyled { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .list-unstyled ul { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin-bottom: 0; padding-top: 1em; padding-bottom: 1em; } .list-unstyled ul li:last-child { margin-bottom: 0; } .list-clean li { list-style-type: none; } .list-nested { padding-top: 1em; padding-bottom: 1em; padding-left: 3em; width: 100%; } .list-nested > li { list-style-type: circle; } .arrow-list-lg { padding: 0; } .arrow-list-lg > li { display: -webkit-box; display: -ms-flexbox; display: flex; } .arrow-list-lg > li li { list-style-type: none; } .arrow-list-lg > li:before { content: "→ "; padding-right: .625em; } .list-parent { -ms-flex-wrap: wrap; flex-wrap: wrap; } .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .grid > * { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 1em; -ms-flex-preferred-size: 15em; flex-basis: 15em; } @supports (grid-gap: 0) { .grid { display: -ms-grid; display: grid; grid-gap: 2em; } .grid > * { padding: 0; } @media (min-width: 40em) { .grid { -ms-grid-columns: (minmax(10.5em, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); } } } .grid-2-col { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .grid-2-col > * { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 1em; -ms-flex-preferred-size: 15em; flex-basis: 15em; } @supports (grid-gap: 0) { .grid-2-col { display: -ms-grid; display: grid; grid-gap: 2em; } .grid-2-col > * { padding: 0; } @media (min-width: 40em) { .grid-2-col { -ms-grid-columns: (minmax(10.5em, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); } } } @supports (grid-gap: 0) { @media (min-width: 40em) { .grid-2-col { grid-gap: 2em 3em; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } } .grid-4-col { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .grid-4-col > * { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 1em; -ms-flex-preferred-size: 15em; flex-basis: 15em; } @supports (grid-gap: 0) { .grid-4-col { display: -ms-grid; display: grid; grid-gap: 2em; } .grid-4-col > * { padding: 0; } @media (min-width: 40em) { .grid-4-col { -ms-grid-columns: (minmax(10.5em, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); } } } @supports (grid-gap: 0) { .grid-4-col { -ms-grid-columns: (minmax(16.5em, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(16.5em, 1fr)); grid-gap: 2em; } @media (min-width: 60em) and (max-width: 85em) { .grid-4-col { -ms-grid-columns: (minmax(25em, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(25em, 1fr)); } } } .grid-lg { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .grid-lg > * { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 1em; -ms-flex-preferred-size: 15em; flex-basis: 15em; } @supports (grid-gap: 0) { .grid-lg { display: -ms-grid; display: grid; grid-gap: 2em; } .grid-lg > * { padding: 0; } @media (min-width: 40em) { .grid-lg { -ms-grid-columns: (minmax(10.5em, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); } } } @supports (grid-gap: 0) { @media (min-width: 40em) { .grid-lg { grid-gap: 2em 3em; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } } @media (min-width: 40em) { .grid-lg { grid-gap: 5em 0; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } @media (min-width: 48em) { .grid-lg { grid-gap: 0 5em; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } @media (max-width: 56.25em) { .grid-banner > .container { padding: 2em; } } @media (min-width: 56.25em) { .grid-banner .grid-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-grid-rows: minmax(50vh, 1fr); grid-template-rows: minmax(50vh, 1fr); } .grid-banner .grid-wrap > * { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 1em; -ms-flex-preferred-size: 15em; flex-basis: 15em; } @supports (grid-gap: 0) { .grid-banner .grid-wrap { display: -ms-grid; display: grid; grid-gap: 2em; } .grid-banner .grid-wrap > * { padding: 0; } @media (min-width: 40em) { .grid-banner .grid-wrap { -ms-grid-columns: (minmax(10.5em, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); } } } .grid-banner .grid-wrap > * { display: -webkit-box; display: -ms-flexbox; display: flex; } } @supports (grid-gap: 0) { .grid-flush { grid-gap: 0 !important; } } .circle-mask { border-radius: 50%; height: 100%; width: 100%; overflow: hidden; max-height: 20rem; max-width: 20rem; } .circle-mask figcaption { display: none; } .circle-mask.mask-outside { -webkit-shape-outside: circle(); shape-outside: circle(); } @media (min-width: 56.25em) { .circle-mask { max-height: 25rem; max-width: 25rem; } } @media (min-width: 40em) { .circle-mask-md { border-radius: 50%; height: 100%; width: 100%; overflow: hidden; max-height: 20rem; max-width: 20rem; max-height: 20rem; max-width: 20rem; } .circle-mask-md figcaption { display: none; } .circle-mask-md.mask-outside { -webkit-shape-outside: circle(); shape-outside: circle(); } } @media (min-width: 40em) and (min-width: 56.25em) { .circle-mask-md { max-height: 25rem; max-width: 25rem; } } @media (min-width: 40em) { .circle-mask-sm { border-radius: 50%; height: 100%; width: 100%; overflow: hidden; max-height: 20rem; max-width: 20rem; max-height: 10rem; max-width: 10rem; } .circle-mask-sm figcaption { display: none; } .circle-mask-sm.mask-outside { -webkit-shape-outside: circle(); shape-outside: circle(); } } @media (min-width: 40em) and (min-width: 56.25em) { .circle-mask-sm { max-height: 25rem; max-width: 25rem; } } .rounded-mask { border-radius: 1rem; max-width: 100%; overflow: hidden; } .rounded-mask img { border-radius: 1rem; } .demo-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100vh; width: 100%; } .demo-wrap > * { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } @font-face { font-family: 'Whitney-Bold'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-Bold.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-Bold.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-Bold.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Whitney-SemiBold'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-SemiBold.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-SemiBold.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-SemiBold.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Whitney-Medium'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-Medium.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-Medium.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/WhitneyHTF-Medium.ttf") format("truetype"); font-weight: normal; font-style: normal; } .ffy-clearfix .whitney-bold, .ffy-clearfix p > strong, .ffy-clearfix p > b { font-family: "Whitney-Bold", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: normal; } .ffy-clearfix .whitney-semi { font-family: "Whitney-SemiBold", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: normal; } .ffy-clearfix .whitney-med { font-family: "Whitney-Medium", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: normal; } body { font-family: "Whitney-Medium", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } .ffy-clearfix h1, .ffy-clearfix .h1, .ffy-clearfix h2, .ffy-clearfix .h2, .ffy-clearfix h3, .ffy-clearfix .h3, .ffy-clearfix h4, .ffy-clearfix .h4, .ffy-clearfix h5, .ffy-clearfix .h5, .ffy-clearfix h6, .ffy-clearfix .h6 { font-family: "Whitney-SemiBold", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: normal; } .ffy-clearfix h1 > strong, .ffy-clearfix h1 em, .ffy-clearfix h1 b, .ffy-clearfix .h1 > strong, .ffy-clearfix .h1 em, .ffy-clearfix .h1 b, .ffy-clearfix h2 > strong, .ffy-clearfix h2 em, .ffy-clearfix h2 b, .ffy-clearfix .h2 > strong, .ffy-clearfix .h2 em, .ffy-clearfix .h2 b, .ffy-clearfix h3 > strong, .ffy-clearfix h3 em, .ffy-clearfix h3 b, .ffy-clearfix .h3 > strong, .ffy-clearfix .h3 em, .ffy-clearfix .h3 b, .ffy-clearfix h4 > strong, .ffy-clearfix h4 em, .ffy-clearfix h4 b, .ffy-clearfix .h4 > strong, .ffy-clearfix .h4 em, .ffy-clearfix .h4 b, .ffy-clearfix h5 > strong, .ffy-clearfix h5 em, .ffy-clearfix h5 b, .ffy-clearfix .h5 > strong, .ffy-clearfix .h5 em, .ffy-clearfix .h5 b, .ffy-clearfix h6 > strong, .ffy-clearfix h6 em, .ffy-clearfix h6 b, .ffy-clearfix .h6 > strong, .ffy-clearfix .h6 em, .ffy-clearfix .h6 b { font-family: "Whitney-Bold", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: normal; } .ffy-clearfix button, .ffy-clearfix .btn, .ffy-clearfix [class^="btn-"] { font-family: "Whitney-Bold", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: normal; } .bg-pricing { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-banner-PRICING-BLUE-trans.svg"), -webkit-linear-gradient(bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-banner-PRICING-BLUE-trans.svg"), linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.5) 100%); } .bg-support { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-banner-INFO-BLUE-trans.svg"), -webkit-linear-gradient(bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-banner-INFO-BLUE-trans.svg"), linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.5) 100%); } .bg-checkout { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-banner-Launch-Blue-trans-50.svg"), -webkit-linear-gradient(bottom, transparent 40%, rgba(0, 0, 0, 0.4) 100%); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-banner-Launch-Blue-trans-50.svg"), linear-gradient(to top, transparent 40%, rgba(0, 0, 0, 0.4) 100%); } @media (min-width: 48em) { .bg-checkout { background-size: contain; } } .bg-setup { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-banner-Setup-Blue-trans.svg"), -webkit-linear-gradient(bottom, transparent 40%, rgba(0, 0, 0, 0.4) 100%); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-banner-Setup-Blue-trans.svg"), linear-gradient(to top, transparent 40%, rgba(0, 0, 0, 0.4) 100%); } @media (min-width: 48em) { .bg-setup { background-size: contain; } } .bg-info-banner { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/bg-mobile-user-banner-dark-teal.jpg"); background-blend-mode: screen; } </style></head><body> <div class="logged-out sales-person"> <!-- Free Trial Form --> <section class="trial-form bg-blue-g-4 c-white w-100 slide-panel slide-down is-hidden"> <button class="btn-reset panel-close text-lg" onclick="$('.trial-form').toggleClass('is-hidden');"> <svg class="icon mr-ml-0"> <use xlink:href="#icon-cancel" /> </svg> </button> <div class="container pt-2 pb-3"> <h2 class="text-center mb-tiny">Free 14 Day Trial</h2> <p class="h5 text-center mb-1"><span class="c-blue-70">250</span> SMS + <span class="c-blue-70">250</span> Emails</p> <!-- Form --> <form name="TrialForm" class="mr-ml-a mw-25em whitney-med"> <div class="form-wrap"> <!-- Name --> <div class="form-row mb-1"> <label for="" id="-ariaLabel">Name</label> <input id="" name="" type="text" aria-labelledby="-ariaLabel" class="bor-none required" title="This is a required field" required> </div> <div class="sm-flex sm-jc-between"> <!-- Email --> <div class="form-row mb-1 sm-mr-tiny sm-w-50"> <label for="" id="-ariaLabel">Email</label> <input id="" name="" type="email" autocorrect="off" autocapitalize="none" spellcheck="false" aria-labelledby="-ariaLabel" class="bor-none required" title="This is a required field" required> </div> <!-- Phone --> <div class="form-row mb-1 sm-ml-tiny sm-w-50"> <label for="" id="-ariaLabel">Phone</label> <input id="" name="" type="tel" pattern="[0-9]*" maxlength="10" aria-labelledby="-ariaLabel" class="bor-none required" title="This is a required field" required> </div> </div> <!-- Helpers --> <div class="form-row form-helpers flex flex-wrap jc-between mb-1"> <!-- Critical Marker --> <label> <input type="checkbox" name="opt1" id="opt1"> <span class="text-sm pl-tiny">Call Back ASAP</span> </label> <!-- Help Link --> <label> <span class="text-sm"><a class="c-white" href="#">Need Help?</a></span> </label> </div> <!-- Buttons --> <div class="form-row button-wrap flex flex-d-col-rev sm-flex-d-row sm-jc-center"> <input class="btn all-caps bg-blue-40 c-white flex-g-1 pt-pb-1" type="submit" value="sign up"> </div> <!-- end / form-wrap --> </div> </form> </div> </section> <!-- Site Wrap --> <div class="site-wrap bg-blue-40"> <!-- Header --> <header class="site-header" role="banner"> <!-- Nav --> <div class="container flex flex-wrap ai-center jc-between pt-pb-1"> <!-- Site Logo --> <h1 class="site-title"><a href="index.html"><img class="header-logo mw-8em" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/in2m-logo-white.svg" alt="in2Marketplace.com"><span class="sr-only">in2Marketplace.com</span></a></h1> <button id="nav-toggle" class="nav-toggle-html bg-none" aria-hidden="false" aria-expanded="false"> <div class="nav-icon c-white"></div> </button> <!-- Main Nav --> <section class="main-nav flex flex-wrap ai-center jc-center sm-flex-g-1 tc-white" role="navigation"> <!-- Nav --> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/responsive-nav.js"></script> <nav class="nav-collapse" role="navigation"> <ul class="list-reset"> <li class="nav-cta pt-pb-1 text-center"> <a class="btn-round bg-blue-50 all-caps c-white mr-ml-a mw-20em pr-pl-1 text-base w-100" href="#" onclick="$('.trial-form.slide-panel').toggleClass('is-hidden');">Free Trial</a> </li> <li> <a href="features.html">Features</a> </li> <li> <a href="pricing.html">Pricing</a> </li> <li> <a href="support.html">Support</a> </li> <li> <a data-remodal-target="demo-video">Demo</a> </li> <li class="inline-login-link"><a href="login.html">Login</a></li> <!-- end / --> </ul> </nav> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/mobile-nav.js"></script> </section> </div> <!-- Fixed Nav --> <div class="container fixed-nav bg-blue-30 flex-wrap ai-center jc-between hidden"> <!-- Site Logo --> <h1 class="site-title"><a href="index.html"><img class="header-logo mw-8em" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/in2m-logo-white.svg" alt="in2Marketplace.com"><span class="sr-only">in2Marketplace.com</span></a></h1> <!-- Main Nav --> <section class="main-nav flex flex-wrap ai-center jc-center sm-flex-g-1 tc-white" role="navigation"> <nav class="nav-collapse" role="navigation"> <ul class="list-reset"> <li class="nav-cta pt-pb-1"> <a class="btn-round bg-blue-50 all-caps c-white mr-0 pr-pl-1 text-base" href="#" onclick="$('.trial-form.slide-panel').toggleClass('is-hidden');">Free Trial</a> </li> <li> <a href="features.html">Features</a> </li> <li> <a href="pricing.html">Pricing</a> </li> <li> <a href="support.html">Support</a> </li> <li> <a data-remodal-target="demo-video">Demo</a> </li> <li class="inline-login-link"><a href="login.html">Login</a></li> <!-- end / --> </ul> </nav> </section> </div> </header> <!-- Main Content --> <main class="main-content"> <!-- Main Promo (image right) --> <section class="hero-banner bg-blue-g-2 c-white pt-2 text-s-black-50 md-pt-pb-4"> <div class="container md-pt-pb-1"> <!-- Post --> <article class="flex flex-d-col text-center md-text-left md-flex-d-row md-flex-wrap md-ai-center md-jc-between"> <!-- Post Content --> <div class="post-content mb-2 md-mb-0 md-pr-1 md-w-60 lg-w-50"> <!-- Text --> <div class="text-wrap"> <h2 class="mb-sm">The Best Marketing and Messaging Platform.</h2> <p class="h3 antialiased mr-ml-a mw-35em text-lg">One of the most common and used patterns on the web. Use this component to provide important calls to action. Find interesting ways to get the user to click your things by keeping it easy to read.</p> </div> <!-- Hero Buttons--> <div class="button-wrap flex flex-wrap jc-center pt-1 md-jc-start"> <a class="btn-round all-caps bg-blue-70 c-blue-30" href="#" data-remodal-target="demo-video">View Demo</a> <a class="btn-round all-caps bg-blue-30 c-white" href="#">Get Started</a> </div> </div> <!-- Post Media --> <div class="post-media pr-pl-1 md-pr-0 md-pl-2 md-w-40 lg-w-50"> <!-- Image --> <figure class="media-item mb-0 lazyload"> <picture> <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-mobile-devices-2.svg" media="(min-width: 48em)" /> <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-mobile-devices-2-SM.svg" /> <img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-mobile-devices-2-SM.svg" alt="in2Marketplace"> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-mobile-devices-2.svg" alt="in2Marketplace"> </noscript> </picture> </figure> </div> </article> </div> </section> <!-- CTA Banner (Info & Help Buttons) --> <section class="cta-banner bg-info-banner bg-no-repeat bg-cover bg-blue-20 tc-white text-center pt-pb-2 md-pt-pb-4"> <div class="container md-pt-pb-4"> <!-- Buttons --> <div class="button-wrap flex flex-d-col jc-center pt-1 x-sm-flex-d-row x-sm-flex-wrap"> <a class="btn btn-outline btn-round c-white flex-g-1 mr-ml-a mb-1 pt-pb-1 pr-pl-3 text-lg x-sm-mr-ml-sm x-sm-mb-sm md-flex-g-0" href="#" data-remodal-target="demo-video">Discover in2M</a> <a class="btn btn-outline btn-round c-white flex-g-1 mr-ml-a mb-1 pt-pb-1 pr-pl-3 text-lg x-sm-mr-ml-sm x-sm-mb-sm md-flex-g-0" href="#">Success Stories</a> </div> <a href="#" class="block text-center h6 mr-ml-a pt-1"> <svg class="icon"><use xlink:href="#icon-help" /></svg> Help & Support</a> </div> </section> <!-- Features --> <div class="features"> <section class="mod-block bg-blue-30 c-white pt-pb-2 md-pt-pb-4"> <div class="container mw-65em"> <!-- Post --> <article class="text-center flex flex-d-col mb-2 md-text-left md-flex-d-row md-flex-wrap md-ai-center md-jc-between"> <!-- Post Content --> <div class="mb-2 md-mb-0 md-pr-1 md-w-70 lg-w-60"> <!-- Text --> <div class="text-wrap"> <h2 class="title mb-sm">Advanced Targeting</h2> <h3 class="subtitle text-lg"><em>This is where a subtitle would go.</em></h3> <p class="text-md">One of the most common and used patterns on the web. Use this component to provide important calls to action. Find interesting ways to get the user to click your things by keeping it easy to read.</p> </div> <!-- Buttons--> <div class="button-wrap jc-center pt-1 md-jc-start"> <a class="btn-round bg-blue-70 c-blue-30 all-caps text-md" href="#">More Info</a> </div> </div> <!-- Post Media --> <div class="pr-pl-1 md-pr-0 md-pl-2 md-w-30 lg-w-40"> <!-- Image --> <figure class="media-item mb-0 mw-25em lazyload"> <picture> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-targeting.svg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-targeting.svg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-targeting.svg" alt="This alternative text should be used to describe what the user should be viewing." class="lazyload" /> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-targeting.svg" alt="This alternative text should be used to describe what the user should be viewing." /> </noscript> </picture> </figure> </div> </article> </div> </section> <!-- Feature --> <section class="mod-block bg-blue-70 c-blue-30 pt-pb-2 md-pt-pb-4"> <div class="container mw-65em"> <!-- Post --> <article class="text-center flex flex-d-col md-text-left md-flex-d-row-rev md-flex-wrap md-ai-center md-jc-between"> <!-- Post Content --> <div class="mb-2 md-mb-0 md-pl-1 md-w-70 lg-w-60"> <!-- Text --> <div class="text-wrap"> <h2 class="title mb-sm">Dynamic Reporting</h2> <h3 class="subtitle text-lg"><em>This is where a subtitle would go.</em></h3> <p class="text-md">One of the most common and used patterns on the web. Use this component to provide important calls to action. Find interesting ways to get the user to click your things by keeping it easy to read.</p> </div> <!-- Buttons--> <div class="button-wrap jc-center pt-1 md-jc-start"> <a class="btn-round all-caps bg-blue-40 c-white text-md" href="#">View Sample</a> </div> </div> <!-- Post Media --> <div class="pr-pl-1 md-pr-3 md-pl-0 md-w-30 lg-w-40"> <!-- Image --> <figure class="media-item mb-0 mw-25em lazyload"> <picture> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" media="(min-width: 48em)" /> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" alt="This alternative text should be used to describe what the user should be viewing." class="lazyload" /> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" alt="This alternative text should be used to describe what the user should be viewing." /> </noscript> </picture> </figure> </div> </article> </div> </section> <!-- Feature --> <section class="mod-block bg-EEE c-blue-20 pt-pb-2 md-pt-pb-4"> <div class="container mw-65em"> <!-- Post --> <article class="text-center flex flex-d-col mb-2 md-text-left md-flex-d-row md-flex-wrap md-ai-center md-jc-between"> <!-- Post Content --> <div class="mb-2 md-mb-0 md-pr-1 md-w-70 lg-w-60"> <!-- Text --> <div class="text-wrap"> <h2 class="title mb-sm">Payment Gateway</h2> <h3 class="subtitle text-lg"><em>This is where a subtitle would go.</em></h3> <p class="text-md">One of the most common and used patterns on the web. Use this component to provide important calls to action. Find interesting ways to get the user to click your things by keeping it easy to read.</p> </div> <!-- Buttons--> <div class="button-wrap jc-center pt-1 md-jc-start"> <a class="btn-round bg-blue-40 c-white all-caps text-md" href="#">Learn More</a> </div> </div> <!-- Post Media --> <div class="pr-pl-1 md-pr-0 md-pl-2 md-w-30 lg-w-40"> <!-- Image --> <figure class="media-item mb-0 mw-25em lazyload"> <picture> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-payment-options.svg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-payment-options.svg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-payment-options.svg" alt="This alternative text should be used to describe what the user should be viewing." class="lazyload" /> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-payment-options.svg" alt="This alternative text should be used to describe what the user should be viewing." /> </noscript> </picture> </figure> </div> </article> </div> </section> <!-- Feature --> <section class="mod-block bg-grey-80 c-blue-30 pt-pb-2 md-pt-pb-4"> <div class="container mw-65em"> <!-- Post --> <article class="text-center flex flex-d-col md-text-left md-flex-d-row-rev md-flex-wrap md-ai-center md-jc-between"> <!-- Post Content --> <div class="mb-2 md-mb-0 md-pl-1 md-w-70 lg-w-60"> <!-- Text --> <div class="text-wrap"> <h2 class="title mb-sm">Data Analysis</h2> <h3 class="subtitle text-lg"><em>This is where a subtitle would go.</em></h3> <p class="text-md">One of the most common and used patterns on the web. Use this component to provide important calls to action. Find interesting ways to get the user to click your things by keeping it easy to read.</p> </div> <!-- Buttons--> <div class="button-wrap jc-center pt-1 md-jc-start"> <a class="btn-round all-caps bg-blue-40 c-white text-md" href="#">View API</a> </div> </div> <!-- Post Media --> <div class="pr-pl-1 md-pr-3 md-pl-0 md-w-30 lg-w-40"> <!-- Image --> <figure class="media-item mb-0 mw-25em lazyload"> <picture> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-data-analysis-teal.svg" media="(min-width: 48em)" /> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-data-analysis-teal.svg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-data-analysis-teal.svg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-data-analysis-teal.svg" alt="This alternative text should be used to describe what the user should be viewing." class="lazyload" /> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-shaking-hands.svg" alt="This alternative text should be used to describe what the user should be viewing." /> </noscript> </picture> </figure> </div> </article> </div> </section> </div> <!-- Feature Grid Layout --> <div class="md-flex md-flex-wrap md-flex-d-row"> <!-- Features --> <h2 id="features" class="bg-blue-90 c-blue-20 text-center text-md all-caps mb-0 pt-pb-2 w-100 sr-only">Features</h2> <!-- Advanced Targeting - feature --> <section class="mod-block feat-target bg-blue-80 c-blue-30 pt-pb-2 md-flex md-ai-center lg-pt-pb-4 md-w-50"> <div class="container"> <!-- Post --> <article class="text-center flex flex-d-col lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Post Content --> <div class="mb-2 lg-mb-0 lg-pl-1 lg-w-55 xl-w-65"> <!-- Text --> <div class="text-wrap"> <h2 class="h3 title mb-sm">Advanced Targeting</h2> <h3 class="subtitle text-lg"><em>This is where a subtitle would go.</em></h3> <p class="mr-ml-a w-85 md-w-100">The automated communications platform is the most complete texting solution. Now, send the right messages to the right people at the right time - all automatically.</p> </div> <!-- Buttons--> <div class="button-wrap jc-center pt-1 lg-jc-start"> <a class="btn-round all-caps bg-blue-40 c-white text-md" href="#">More Info</a> </div> </div> <!-- Post Media --> <div class="pr-pl-1 w-100 lg-pr-3 lg-w-45 xl-w-35"> <!-- Image --> <figure class="media-item text-center mb-0 mw-20em lazyload"> <picture> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-targeting.svg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-targeting.svg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-targeting.svg" alt="This alternative text should be used to describe what the user should be viewing." class="lazyload" /> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-targeting.svg" alt="This alternative text should be used to describe what the user should be viewing." /> </noscript> </picture> </figure> </div> </article> </div> </section> <!-- Dynamic Reporting - feature --> <section class="mod-block feat-reporting bg-blue-90 c-blue-30 pt-pb-2 md-flex md-ai-center lg-pt-pb-4 md-w-50"> <div class="container"> <!-- Post --> <article class="text-center flex flex-d-col lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Post Content --> <div class="mb-2 lg-mb-0 lg-pl-1 lg-w-55 xl-w-65"> <!-- Text --> <div class="text-wrap"> <h2 class="h3 title mb-sm">Dynamic Reporting</h2> <h3 class="subtitle text-lg"><em>This is where a subtitle would go.</em></h3> <p class="mr-ml-a w-85 md-w-100">Analytics and reports on all your campaigns with a personal dashboard for each campaign. That way, you simplify your marketing efforts and make tracking and monitoring campaign much easier.</p> </div> <!-- Buttons--> <div class="button-wrap jc-center pt-1 lg-jc-start"> <a class="btn-round all-caps bg-blue-40 c-white text-md" href="#">View Sample</a> </div> </div> <!-- Post Media --> <div class="pr-pl-1 w-100 lg-pr-3 lg-w-45 xl-w-35"> <!-- Image --> <figure class="media-item text-center mb-0 mw-20em lazyload"> <picture> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" media="(min-width: 48em)" /> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" alt="This alternative text should be used to describe what the user should be viewing." class="lazyload" /> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-reporting-teal.svg" alt="This alternative text should be used to describe what the user should be viewing." /> </noscript> </picture> </figure> </div> </article> </div> </section> <!-- Payment Gateway - feature --> <section class="mod-block feat-gateway bg-EEE c-blue-30 pt-pb-2 md-flex md-ai-center lg-pt-pb-4 md-w-50"> <div class="container"> <!-- Post --> <article class="text-center flex flex-d-col lg-text-left lg-flex-d-row lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Post Content --> <div class="mb-2 lg-mb-0 lg-pr-1 lg-w-55 xl-w-65"> <!-- Text --> <div class="text-wrap"> <h2 class="h3 title mb-sm">Payment Gateway</h2> <h3 class="subtitle text-lg"><em>This is where a subtitle would go.</em></h3> <p class="mr-ml-a w-85 md-w-100">The automated communications platform is the most complete texting solution. Now, send the right messages to the right people at the right time - all automatically.</p> </div> <!-- Buttons--> <div class="button-wrap jc-center pt-1 lg-jc-start"> <a class="btn-round bg-blue-40 c-white all-caps text-md" href="#">Learn More</a> </div> </div> <!-- Post Media --> <div class="pr-pl-1 w-100 lg-pl-3 lg-w-45 xl-w-35"> <!-- Image --> <figure class="media-item text-center mb-0 mw-20em lazyload"> <picture> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-payment-options.svg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-payment-options.svg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-payment-options.svg" alt="This alternative text should be used to describe what the user should be viewing." class="lazyload" /> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-payment-options.svg" alt="This alternative text should be used to describe what the user should be viewing." /> </noscript> </picture> </figure> </div> </article> </div> </section> <!-- Data Analysis - feature --> <section class="mod-block feat-analysis bg-grey-light c-blue-30 pt-pb-2 lg-pt-pb-4 md-w-50"> <div class="container"> <!-- Post --> <article class="text-center flex flex-d-col lg-text-left lg-flex-d-row lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Post Content --> <div class="mb-2 lg-mb-0 lg-pr-1 lg-w-55 xl-w-65"> <!-- Text --> <div class="text-wrap"> <h2 class="h3 title mb-sm">Data Analysis</h2> <h3 class="subtitle text-lg"><em>This is where a subtitle would go.</em></h3> <p class="mr-ml-a w-85 md-w-100">As your organization expands, so will your need for access control and brand consistency. That's why we developed features specifically for Enterprises with multiple locations and departments.</p> </div> <!-- Buttons--> <div class="button-wrap jc-center pt-1 lg-jc-start"> <a class="btn-round all-caps bg-blue-40 c-white text-md" href="#">View API</a> </div> </div> <!-- Post Media --> <div class="pr-pl-1 w-100 lg-pl-3 lg-w-45 xl-w-35"> <!-- Image --> <figure class="media-item text-center mb-0 mw-20em lazyload"> <picture> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-data-analysis-teal.svg" media="(min-width: 48em)" /> <source data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-data-analysis-teal.svg" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-data-analysis-teal.svg" data-srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-data-analysis-teal.svg" alt="This alternative text should be used to describe what the user should be viewing." class="lazyload" /> <noscript> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/img-shaking-hands.svg" alt="This alternative text should be used to describe what the user should be viewing." /> </noscript> </picture> </figure> </div> </article> </div> </section> <!-- end / --> </div> <!-- Pricing Plans --> <section class="bg-blue-90 pb-2 hidden"> <h2 id="pricing" class="all-caps bg-blue-80 c-blue-white text-center text-md mb-0 pt-pb-2 w-100">Pricing</h2> <div class="container"> <!-- Plans --> <div class="pricing-plans"> <!-- Pricing Tables --> <div class="pricing-tables c-blue-40"> <!-- "Basic" Features --> <div class="pricing-plan flex flex-d-col"> <h2 class="card-title">Basic</h2> <div class="plan-cost"> <p class="plan-price">$29</p> <span>/</span> <p class="plan-type">Monthly</p> </div> <ul class="plan-features list-reset flex-g-1 pt-2 pr-2 pb-1 pl-2"> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> </ul> <a class="btn all-caps bg-blue-40 c-white mr-ml-a w-50" href="">Select</a> </div> <!-- "Super" Plan --> <div class="pricing-plan flex flex-d-col"> <h2 class="card-title">Super</h2> <div class="plan-cost"> <p class="plan-price">$39</p> <span>|</span> <p class="plan-type">Monthly</p> </div> <ul class="plan-features list-reset flex-g-1 pt-2 pr-2 pb-1 pl-2"> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> </ul> <a class="btn all-caps bg-blue-40 c-white mr-ml-a w-50" href="#">Select</a> </div> <!-- "Premium" Plan --> <div class="pricing-plan flex flex-d-col featured-plan"> <div class="featured-ribbon">Best Value</div> <h2 class="card-title">Premium</h2> <div class="plan-cost"> <p class="plan-price">$59</p> <span>/</span> <p class="plan-type">Monthly</p> </div> <ul class="plan-features list-reset flex-g-1 pt-2 pr-2 pb-1 pl-2"> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> </ul> <a class="btn all-caps bg-blue-40 c-white mr-ml-a w-50" href="#">Select</a> </div> <!-- "Ultmate" Plan --> <div class="pricing-plan flex flex-d-col"> <h2 class="card-title">Ultimate</h2> <div class="plan-cost"> <p class="plan-price">$89</p> <span>/</span> <p class="plan-type">Monthly</p> </div> <ul class="plan-features list-reset flex-g-1 pt-2 pr-2 pb-1 pl-2"> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> <li> <h3>Package Feature</h3> </li> </ul> <a class="btn all-caps bg-blue-40 c-white mr-ml-a w-50" href="">Select</a> </div> </div> </div> </div> </section> <!-- Help Videos --> <div class="flex flex-wrap md-flex-d-row"> <h2 id="HomeFAQ" class="bg-blue-90 c-blue-20 text-left text-md all-caps mb-0 pt-pb-2 w-100 sr-only">Help Videos</h2> <!-- Video 1 --> <section class="mod-block bg-blue-80 c-blue-30 pt-pb-2 w-100 lg-w-50"> <div class="container lg-mr-0 xl-pl-1 lg-mw-48em"> <!-- Post --> <article class="flex flex-d-col jc-between lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Post Content --> <div class="flex-1"> <!-- Text --> <div class="text-wrap mb-2"> <h3 class="title mb-sm">How do I get started?</h3> <p class="lg-text-md">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </div> <!-- tutorial --> <div class="media-wrap mb-2"> <iframe class="lazyload" width="100%" data-src="https://www.youtube.com/embed/yka0UnJ2xbU?rel=0" frameborder="0" allowfullscreen></iframe> <noscript><iframe width="100%" src="https://www.youtube.com/embed/yka0UnJ2xbU?rel=0" frameborder="0" allowfullscreen></iframe></noscript> </div> <!-- Survey Buttons --> <div class="flex ai-center jc-center"> <p class="mb-0 pr-1 w-a"><a class="bor-bot-none text-lg" href="#">Did this help?</a></p> <!-- radio buttons --> <div class="radio-group flex"> <label class="radiobutton flex mr-1"> <input type="radio" name="option1" aria-labelledby="-ariaLabel"> <span class="item-desc">Yes</span> </label> <label class="radiobutton flex flex-wrap"> <input type="radio" name="option1" aria-labelledby="-ariaLabel"> <span class="item-desc">No</span> </label> </div> </div> </div> </article> </div> </section> <!-- Video 2 --> <section class="mod-block bg-blue-90 c-blue-30 pt-pb-2 w-100 lg-w-50"> <div class="container lg-ml-0 xl-pr-1 lg-mw-48em"> <!-- Post --> <article class="flex flex-d-col jc-between lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Post Content --> <div class="flex-1"> <!-- Text --> <div class="text-wrap mb-2"> <h3 class="title mb-sm">How does in2M work?</h3> <p class="lg-text-md">See how we are able to use the latest technologies to make your campaign success. We need more text to get two lines in this block.</p> </div> <!-- tutorial --> <div class="media-wrap mb-2"> <iframe class="lazyload" width="100%" src="https://www.youtube.com/embed/LUfnhZPXTic?rel=0" data-src="https://www.youtube.com/embed/LUfnhZPXTic?rel=0" frameborder="0" allowfullscreen></iframe> <noscript><iframe width="100%" src="https://www.youtube.com/embed/LUfnhZPXTic?rel=0" frameborder="0" allowfullscreen></iframe></noscript> </div> <!-- Survey Buttons --> <div class="flex ai-center jc-center"> <p class="mb-0 pr-1 w-a"><a class="bor-bot-none text-lg" href="#">Did this help?</a></p> <!-- radio buttons --> <div class="radio-group flex"> <label class="radiobutton flex mr-1"> <input type="radio" name="option1" aria-labelledby="-ariaLabel"> <span class="item-desc">Yes</span> </label> <label class="radiobutton flex flex-wrap"> <input type="radio" name="option1" aria-labelledby="-ariaLabel"> <span class="item-desc">No</span> </label> </div> </div> </div> </article> </div> </section> <!-- end / --> </div> <!-- FAQ List --> <section class="bg-grey-light pt-pb-4 hidden"> <div class="container"> <!-- FAQ columns --> <div class="flex flex-wrap"> <!-- Left Col --> <div class="mb-3 w-100 lg-mb-0 lg-pr-2 lg-w-50"> <!-- Retailer FAQ Accordion --> <div class="flex flex-d-col jc-between mb-3 lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between w-100"> <!-- Retailer FAQ --> <h2 class="all-caps bor-bot-1 bor-bot-s c-blue-60 mb-1-pt5 pb-tiny text-md w-100"><span class="c-blue-40">Retailer FAQs</span></h2> <!-- FAQ list --> <div class="flex-1"> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do subscribers opt in after opting out?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I create a distribution list?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I import contacts?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed w-100" data-collapsible-set="retail-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I create a custom data field?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> </div> </div> <!-- Retail User FAQ Accordion --> <div class="flex flex-d-col jc-between lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Retail User FAQ --> <h2 class="all-caps bor-bot-1 bor-bot-s c-blue-60 mb-1-pt5 pb-tiny text-md w-100"><span class="c-blue-40">Retailer User FAQs</span></h2> <!-- FAQ list --> <div class="flex-1"> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-user-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I get started?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-user-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How does in2M work?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-user-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I import contacts?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed w-100" data-collapsible-set="retail-user-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How does in2M work?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> </div> </div> <!-- end / left col --> </div> <!-- Right Col --> <div class="w-100 lg-pl-2 lg-w-50"> <!-- Application FAQ Accordion --> <div class="flex flex-d-col jc-between mb-3 lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between w-100"> <!-- Retailer FAQ --> <h2 class="all-caps bor-bot-1 bor-bot-s c-blue-60 mb-1-pt5 pb-tiny text-md w-100"><span class="c-blue-40">Application FAQs</span></h2> <!-- FAQ list --> <div class="flex-1"> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="app-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do subscribers opt in after opting out?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="app-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I create a distribution list?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="app-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I import contacts?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed w-100" data-collapsible-set="app-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I create a custom data field?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> </div> </div> <!-- General FAQ Accordion --> <div class="flex flex-d-col jc-between lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Retail User FAQ --> <h2 class="all-caps bor-bot-1 bor-bot-s c-blue-60 mb-1-pt5 pb-tiny text-md w-100"><span class="c-blue-40">General FAQs</span></h2> <!-- FAQ list --> <div class="flex-1"> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="general-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I get started?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="general-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How does in2M work?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="general-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I import contacts?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed w-100" data-collapsible-set="general-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How does in2M work?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> </div> </div> <!-- end / right col --> </div> </div> </div> </section> <!-- FAQ List --> <section class="bg-blue-30 pt-pb-4"> <div class="container"> <!-- FAQ columns --> <div class="flex flex-wrap"> <!-- Left Col --> <div class="mb-3 w-100 lg-mb-0 lg-pr-2 lg-w-50"> <!-- Retailer FAQ Accordion --> <div class="flex flex-d-col jc-between mb-3 lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between w-100"> <!-- Retailer FAQ --> <h2 class="all-caps bor-bot-1 bor-bot-s c-blue-40 mb-1-pt5 pb-tiny text-md w-100"><span class="c-blue-90">Retailer FAQs</span></h2> <!-- FAQ list --> <div class="flex-1 c-blue-70"> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do subscribers opt in after opting out?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I create a distribution list?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I import contacts?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed w-100" data-collapsible-set="retail-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I create a custom data field?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> </div> </div> <!-- Retail User FAQ Accordion --> <div class="flex flex-d-col jc-between lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Retail User FAQ --> <h2 class="all-caps bor-bot-1 bor-bot-s c-blue-40 mb-1-pt5 pb-tiny text-md w-100"><span class="c-blue-90">Retailer User FAQs</span></h2> <!-- FAQ list --> <div class="flex-1 c-blue-70"> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-user-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I get started?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-user-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How does in2M work?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="retail-user-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I import contacts?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed w-100" data-collapsible-set="retail-user-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How does in2M work?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> </div> </div> <!-- end / left col --> </div> <!-- Right Col --> <div class="w-100 lg-pl-2 lg-w-50"> <!-- Application FAQ Accordion --> <div class="flex flex-d-col jc-between mb-3 lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between w-100"> <!-- Retailer FAQ --> <h2 class="all-caps bor-bot-1 bor-bot-s c-blue-40 mb-1-pt5 pb-tiny text-md w-100"><span class="c-blue-90">Application FAQs</span></h2> <!-- FAQ list --> <div class="flex-1 c-blue-70"> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="app-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do subscribers opt in after opting out?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="app-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I create a distribution list?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="app-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I import contacts?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed w-100" data-collapsible-set="app-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I create a custom data field?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> </div> </div> <!-- General FAQ Accordion --> <div class="flex flex-d-col jc-between lg-text-left lg-flex-d-row-rev lg-flex-wrap lg-ai-center lg-jc-between"> <!-- Retail User FAQ --> <h2 class="all-caps bor-bot-1 bor-bot-s c-blue-40 mb-1-pt5 pb-tiny text-md w-100"><span class="c-blue-90">General FAQs</span></h2> <!-- FAQ list --> <div class="flex-1 c-blue-70"> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="general-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I get started?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="general-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How does in2M work?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed mb-1 w-100" data-collapsible-set="general-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How do I import contacts?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">Watch the video below to help get up and running with in2Marketplace's powerful marketing platform.</p> </article> <!-- FAQ --> <article class="collapsible collapsible-collapsed w-100" data-collapsible-set="general-faq"> <h3 class="h5 collapsible-header flex ai-center jc-between mb-0 w-100"><span class="mr-sm">How does in2M work?</span> <span class="icon-plus text-md"><svg class="icon"><use xlink:href="#icon-plus" /></svg></span></h3> <p class="collapsible-content m-0 pt-pb-1">See how we are able to use the latest technologies to make your campaign success.</p> </article> </div> </div> <!-- end / right col --> </div> </div> </div> </section> <!-- end / main-content --> </main> <!-- Footer --> <footer class="site-footer bg-blue-20 c-white pt-pb-4 text-center md-text-left" role="contentinfo"> <div class="container flex flex-d-col jc-center md-flex-d-row md-ai-center md-jc-between lg-jc-end"> <!-- Footer Contact --> <div class="footer-contact mr-ml-a mb-3 md-ml-0 md-mb-0 md-pr-3 md-w-50"> <!-- Logo --> <a class="block mb-sm" href="super-admin.html"><img class="footer-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/in2m-logo-white.svg" alt="in2Marketplace.com" title="in2Marketplace.com" /></a> <!-- Copyrights --> <div class="flex jc-center mb-1 md-jc-start"> <p class="antialiased mb-0 mr-sm">© 2016 <a class="bor-bot-none c-white" href="#0">Company Name</a></p><a class="mr-sm" href="#"><svg class="icon c-blue-60 mr-ml-0"><use xlink:href="#icon-facebook" /></svg><span class="sr-only">Find us on Facebook</span></a> <a class="mr-sm" href="#"><svg class="icon c-blue-60 mr-ml-0"><use xlink:href="#icon-twitter" /></svg><span class="sr-only">Follow us on Twitter</span></a> </div> <!-- Message --> <p class="antialiased mr-ml-a pr-pl-4 text-base md-pr-pl-0">Something about the company should go here. We can talk about whatever we think is best to relate to the potential customer.</p> <p class="c-blue-90 mb-sm">Talk With Us <a class="c-blue-60 bor-none ml-sm" href="tel:8005551234">(800) 555-1234</a></p> <p class="c-blue-90">Send Email <a class="c-blue-60 bor-none ml-sm" href="tel:8005551234">contact@in2marketplace.com</a></p> <!-- end / footer-contact --> </div> <!-- Footer Links --> <div class="footer-links md-flex md-jc-between md-w-50 lg-w-40"> <!-- Resources --> <div class="nav-block mb-3 md-mb-0 md-pr-2 md-w-60"> <h4 class="c-blue-90 mb-sm text-lg">Get Help</h4> <ul class="footer-menu c-blue-60 list-reset mb-0 pl-0 text-md"> <li><a data-remodal-target="help-contact-form">Product Support</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">Terms / Privacy</a></li> <li class="pt-1"> <div class="search-bar c-blue-60 flex flex-wrap mr-ml-a mw-15em md-mr-ml-0"> <input class="bg-trans bor-2 bor-solid bor-top-2 bor-bot-2 bor-left-2 c-blue-60" id="search-form" type="search" role="search"> <button class="search-button bg-none bor-2 bor-solid bor-top-2 bor-bot-2 bor-left-none c-blue-60" type="submit"><svg class="icon"><use xlink:href="#icon-search" /></svg> </button> </div> </li> </ul> </div> <!-- Contact --> <div class="nav-block"> <h4 class="c-blue-90 mb-sm text-lg">Connect</h4> <ul class="footer-menu c-blue-60 list-reset mb-0 pl-0 text-md"> <li><a href="#">Rep Finder</a></li> <li><a href="#">Request Demo</a></li> <li><a href="#">View Blog</a></li> <li><a href="#">Join Team</a></li> <li class="mr-ml-a pt-1 mw-15em"><a class="btn-md all-caps bg-trans c-blue-50 bor-2 bor-solid text-sm w-100" href="#">Login</a></li> </ul> </div> <!-- end / footer-links --> </div> </div> </footer> <!-- end / site-wrap--> </div> <!-- Demo Video --> <div class="remodal clear-modal video-modal" data-remodal-id="demo-video" role="dialog" aria-labelledby="demo-video-title" aria-describedby="demo-video-desc"> <!-- Close Button --> <button data-remodal-action="close" class="remodal-close" aria-label="Close"> <svg class="icon"> <use xlink:href="#icon-cancel" /> </svg> </button> <!-- Modal Content --> <div class="modal-content"> <!-- Title --> <h2 id="demo-video-title" class="sr-only">in2Marketplace.com Demo Video</h2> <!-- Description --> <div id="demo-video-desc"> <!-- Video --> <div class="video mr-ml-a"> <div class="media-wrap"> <iframe class="lazyload" width="100%" data-src="https://www.youtube.com/embed/ElAJbhkH2lU?rel=0" frameborder="0" allowfullscreen></iframe> <noscript><iframe width="100%" src="https://www.youtube.com/embed/ElAJbhkH2lU?rel=0" frameborder="0" allowfullscreen></iframe></noscript> </div> </div> </div> </div> <!-- Modal Buttons --> <div class="modal-buttons pt-2"> <a class="btn-round all-caps bg-blue-40 c-white text-md" href="pricing.html">Get Your 14 Day Free Trial</a> </div> </div> <!-- Contact Us form --> <div class="remodal bg-blue-30 c-white mw-35em" data-remodal-id="help-contact-form" role="dialog" aria-labelledby="help-contact-title" aria-describedby="help-contact-desc"> <!-- Close Button --> <button data-remodal-action="close" class="remodal-close" aria-label="Close"> <svg class="icon"> <use xlink:href="#icon-cancel" /> </svg> </button> <!-- Modal Content --> <div class="modal-content bg-blue-30 c-white"> <!-- Title --> <h2 id="help-contact-title" class="h3 text-center">Let us know how we can better help you use the in2M platform or the website.</h2> <!-- Description --> <div id="help-contact-desc" class="post-text"> <p class="text-center mr-ml-a mw-25em">Please fill out the form so we can get a better understanding of the problem.</p> <!-- Form --> <form name="HelpContactForm"> <div class="form-wrap text-md"> <!-- Username --> <div class="form-row mb-1"> <label for="" id="-ariaLabel">Name <span class="req-mark">*</span></label> <input id="" name="" type="text" aria-labelledby="-ariaLabel" class="required" title="This is a required field" required> </div> <!-- Email --> <div class="form-row mb-1"> <label for="" id="-ariaLabel">Email <span class="req-mark">*</span></label> <input id="" name="" type="email" autocorrect="off" autocapitalize="none" spellcheck="false" aria-labelledby="-ariaLabel" class="required" title="This is a required field" required> </div> <!-- Issue --> <div class="form-row"> <label for="" id="-ariaLabel">User Issue</label> <textarea maxlength="200" aria-labelledby="-ariaLabel" rows="5"></textarea> </div> <!-- Remember Me / Forgot Password --> <div class="form-row form-helpers flex flex-wrap jc-between mb-1 pt-1"> <!-- Critical Marker --> <label> <input type="checkbox" name="opt1" id="opt1"> <span class="text-sm pl-tiny">Mark as Urgent</span> </label> <!-- Help Link --> <label> <span class="text-md"><a class="c-blue-60" href="#">Need To Talk?</a></span> </label> </div> <!-- Buttons --> <div class="form-row button-wrap flex flex-d-col-rev text-base sm-flex-d-row sm-jc-center"> <input class="btn-round save-button all-caps bg-blue-40 c-white text-md w-50" type="submit" value="send"> </div> <!-- end / form-wrap --> </div> </form> </div> </div> </div> <!-- Dependencies --> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/script.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/headroom.js"></script> </div> </body></html>

Related: See More


Questions / Comments: