A Pen by Allie Fleming on CodePen.
Created
May 21, 2018 04:46
-
-
Save funraise-af/36410020173341582584e495a236caab to your computer and use it in GitHub Desktop.
Webinar Form charity:water CARD
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <base href="http://go.funraise.io" > | |
| <meta charset="utf-8"/> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
| <meta name="description" content="%%description%%"/> | |
| <title>%%title%%</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> | |
| <link href="https://funraise.io/css/style.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link rel="shortcut icon" type="image/x-icon" href="https://funraise.io/assets/images/gen/favicon.ico" /> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script> | |
| </head> | |
| <body class="white pb_100"> | |
| <!-- NAV --> | |
| <nav class="z-depth-0 pt_40 pb_100"> | |
| <div class="container pb_50 noPaddingX"> | |
| <div class="row noPaddingX"> | |
| <div class="col"> | |
| <a href="https://funraise.io" target="_blank"><img src="https://www.funraise.io/assets/images/gen/FunraiseLogo2.png" style="max-width: 125px;"></a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- VIDEO --> | |
| <div class="container noPaddingX"> | |
| <div class="row noPaddingX"> | |
| <div class="col s12"> | |
| <!-- WISTIA VIDEO EMBED --> | |
| <script src="https://fast.wistia.com/embed/medias/ply0zd9tnf.jsonp" async></script> | |
| <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script> | |
| <div id="wistiaVidContainer" class="wistia_responsive_padding" style="padding:56.25% 0 0 0; position:relative;"> | |
| <div class="wistia_responsive_wrapper" style="height:100%; left:0; position:absolute; top:0; width:100%;"> | |
| <div class="wistia_embed wistia_async_ply0zd9tnf seo=false videoFoam=true" style="height:100%;position:relative;width:100%"> | |
| <div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"> | |
| <img src="https://fast.wistia.com/embed/medias/ply0zd9tnf/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" onload="this.parentNode.style.opacity=1;" /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- BRIEF --> | |
| <div class="container content-block pt_100 noPaddingX"> | |
| <div class="row pt_30 noPaddingX"> | |
| <div class="col s12 l6"> | |
| <h4 class="pb_20 noMarginY">How charity: water built an $8MM recurring revenue program.</h4> | |
| <!-- SOCIAL SHARES --> | |
| <a href="#"> | |
| <i class="fab fa-lg fa-fw fa-twitter"></i> | |
| </a> | |
| <a href="#"> | |
| <i class="fab fa-lg fa-fw fa-facebook-f"></i> | |
| </a> | |
| <a href="#"> | |
| <i class="fab fa-lg fa-fw fa-google-plus-g"></i> | |
| </a> | |
| </div> | |
| <div class="col s12 l5 offset-l1"> | |
| <p class="pb_20 noMarginY">THIS TEXT NEEDS TO BE UDPATED! Join this conversation with Tyler Riewer, Brand Content Lead at charity:water, and Justin Wheeler, CEO and Co-founder of Funraise, about building and maintaining a recurring donor program that works on many levels. Engage your donors and increase loyalty, reduce attrition, lower operation costs, and establish a more predictable revenue stream - and when you spend less time focused on finances, you'll have more time to spend on your cause.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ACCESS CARD --> | |
| <div class="accessCard" id="accessCard"> | |
| <div class="container noPaddingX"> | |
| <div class="row noPaddingX"> | |
| <div class="formContainer"> | |
| <div class="card z-depth-5"> | |
| <div class="card-content pt_30 pb_30"> | |
| <form accept-charset="UTF-8" method="post" action="" class="form" id="pardot-form"> | |
| <div style="display:none;"> | |
| <input type="hidden" name="_csrf_token" value="f5b28d1a337171ff519f0cca8c8ad8f0b520320229917320cfab5a48573274f8f0fd20416457dfdf3d72dea119870f8b"> </div> | |
| <style type="text/css"> | |
| form.form p label { color: #000000; } | |
| </style> | |
| <p class="noMarginY pb_20 bold grey-text text-darken-4" style="font-size:18px;">Sign up to access the webinar</p> | |
| <div class="input-field pb_20"> | |
| <input type="text" name="445932_197848pi_445932_197848" id="445932_197848pi_445932_197848" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 445932, 197848, );"> | |
| <label class="field-label" for="445932_197848pi_445932_197848">Email</label> | |
| <p class="form-field email pd-text required"></p> | |
| <div id="error_for_445932_197848pi_445932_197848" style="display:none"></div> | |
| </div> | |
| <div class="input-field pb_20"> | |
| <input type="text" name="445932_197850pi_445932_197850" id="445932_197850pi_445932_197850" value="" class="text" size="30" maxlength="40" onchange=""> | |
| <label class="field-label" for="445932_197850pi_445932_197850">First Name</label> | |
| <p class="form-field first_name pd-text required"></p> | |
| <div id="error_for_445932_197850pi_445932_197850" style="display:none"></div> | |
| </div> | |
| <div class="input-field pb_20"> | |
| <input type="text" name="445932_197852pi_445932_197852" id="445932_197852pi_445932_197852" value="" class="text" size="30" maxlength="80" onchange=""> | |
| <label class="field-label" for="445932_197852pi_445932_197852">Last Name</label> | |
| <p class="form-field last_name pd-text required"></p> | |
| <div id="error_for_445932_197852pi_445932_197852" style="display:none"></div> | |
| </div> | |
| <div class="input-field pb_20"> | |
| <input type="text" name="445932_197854pi_445932_197854" id="445932_197854pi_445932_197854" value="" class="text" size="30" maxlength="255" onchange=""> | |
| <label class="field-label" for="445932_197854pi_445932_197854">Organization Name</label> | |
| <p class="form-field company pd-text required"></p> | |
| <div id="error_for_445932_197854pi_445932_197854" style="display:none"></div> | |
| </div> | |
| <!-- forces IE5-8 to correctly submit UTF8 content --> | |
| <input name="_utf8" type="hidden" value="☃"> | |
| <p class="submit"> | |
| <input class="btn btn-large" type="submit" accesskey="s" value="Open Sesame"> | |
| </p> | |
| <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value=""></form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FOOTER --> | |
| <footer class="pt_100"> | |
| <div class="container noPaddingX"> | |
| <div class="row noPaddingX"> | |
| <div class="divider"></div> | |
| <div class="row noPaddingX pt_40"> | |
| <div class="col s12 m4"> | |
| <a href="https://funraise.io" target="_blank"><img src="https://www.funraise.io/assets/images/gen/FunraiseLogo2.png" style="max-width: 125px;"></a> | |
| </div> | |
| <div class="col s12 m8 right-align"> | |
| <p class="footerTextLanding">Product</p> | |
| <p class="footerTextLanding">Blog</p> | |
| <p class="footerTextLanding">Schedule a Demo</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <style> | |
| /* TURN ON/OFF ACCESS FORM */ | |
| #wistiaVidContainer { | |
| filter: blur(3rem); | |
| } | |
| .accessCard { | |
| display: inline; | |
| } | |
| /* PAGE STYLES */ | |
| .formContainer { | |
| margin: auto; | |
| width: 100%; | |
| max-width: 400px; | |
| } | |
| .accessCard { | |
| position: absolute; | |
| top: 0px; | |
| padding-top: 150px; | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| .footerTextLanding { | |
| display: inline-block; | |
| margin-right: 10px; | |
| margin-top: 0px; | |
| } | |
| .card .card-content { | |
| padding-left: 30px; | |
| padding-right: 30px; | |
| } | |
| p.submit { | |
| padding-top: 30px; | |
| text-align: right; | |
| } | |
| .dependentFieldSlave { | |
| display: none; | |
| } | |
| p.submit { | |
| padding-top: 40px; | |
| text-align: right; | |
| } | |
| body { | |
| min-height: 100vh; | |
| } | |
| label { | |
| color: #9e9e9e; | |
| font-size: 1rem; | |
| } | |
| [type="checkbox"]+label { | |
| position: relative; | |
| padding-left: 35px; | |
| cursor: pointer; | |
| display: inline-block; | |
| height: 25px; | |
| line-height: 25px; | |
| font-size: 1rem; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .dropdown-content li>span>label { | |
| top: -10px; | |
| } | |
| input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label { | |
| color: #2979ff; | |
| } | |
| [type="checkbox"]:checked+label:before { | |
| left: -5px; | |
| width: 12px; | |
| height: 22px; | |
| border-right: 2px solid #2979ff; | |
| border-bottom: 2px solid #2979ff; | |
| } | |
| textarea { | |
| overflow: auto; | |
| height: 3rem; | |
| background-color: transparent; | |
| border-bottom: 1px solid #CCCCCC !important; | |
| font-size: 16px !important; | |
| overflow-y: hidden; | |
| padding: .8rem 0 1.6rem 0 !important; | |
| min-height: 3rem; | |
| border: none; | |
| border-radius: 0; | |
| outline: none !important; | |
| height: 3rem; | |
| width: 100%; | |
| margin: 0 0 20px 0 !important; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| -webkit-transition: all 0.3s; | |
| transition: all 0.3s; | |
| -webkit-appearance: textarea; | |
| background-color: white; | |
| -webkit-rtl-ordering: logical; | |
| flex-direction: column; | |
| resize: auto; | |
| cursor: text; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| padding: 2px; | |
| text-rendering: auto; | |
| color: initial; | |
| letter-spacing: normal; | |
| word-spacing: normal; | |
| text-transform: none; | |
| text-indent: 0px; | |
| text-shadow: none; | |
| display: inline-block; | |
| text-align: start; | |
| font: 400 11px system-ui; | |
| -webkit-writing-mode: horizontal-tb; | |
| } | |
| a i { | |
| color: #000000; | |
| opacity: .4; | |
| transition: 0.2s opacity ease-in-out; | |
| margin-left: 6px; | |
| } | |
| a:first-of-type i { | |
| margin-left: 0px; | |
| } | |
| a:hover i { | |
| opacity: .7; | |
| } | |
| .content-block p { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| </style> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('form').submit(function() { | |
| var card = document.getElementById("accessCard"); | |
| card.style.display = "none"; | |
| var video = document.getElementById("wistiaVidContainer"); | |
| video.style.filter = "none"; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* PAGE STYLES */ | |
| .formContainer { | |
| margin: auto; | |
| width: 100%; | |
| max-width: 400px; | |
| } | |
| .accessCard { | |
| position: absolute; | |
| top: 15%; | |
| width: 100vw; | |
| height: 100vh; | |
| display: inline; | |
| } | |
| .footerTextLanding { | |
| display: inline-block; | |
| margin-right: 10px; | |
| margin-top: 0px; | |
| } | |
| .card .card-content { | |
| padding-left: 30px; | |
| padding-right: 30px; | |
| } | |
| p.submit { | |
| padding-top: 30px; | |
| text-align: right; | |
| } | |
| .dependentFieldSlave { | |
| display: none; | |
| } | |
| p.submit { | |
| padding-top: 40px; | |
| text-align: right; | |
| } | |
| body { | |
| min-height: 100vh; | |
| } | |
| label { | |
| color: #9e9e9e; | |
| font-size: 1rem; | |
| } | |
| [type="checkbox"]+label { | |
| position: relative; | |
| padding-left: 35px; | |
| cursor: pointer; | |
| display: inline-block; | |
| height: 25px; | |
| line-height: 25px; | |
| font-size: 1rem; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .dropdown-content li>span>label { | |
| top: -10px; | |
| } | |
| input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label { | |
| color: #2979ff; | |
| } | |
| [type="checkbox"]:checked+label:before { | |
| left: -5px; | |
| width: 12px; | |
| height: 22px; | |
| border-right: 2px solid #2979ff; | |
| border-bottom: 2px solid #2979ff; | |
| } | |
| textarea { | |
| overflow: auto; | |
| height: 3rem; | |
| background-color: transparent; | |
| border-bottom: 1px solid #CCCCCC !important; | |
| font-size: 16px !important; | |
| overflow-y: hidden; | |
| padding: .8rem 0 1.6rem 0 !important; | |
| min-height: 3rem; | |
| border: none; | |
| border-radius: 0; | |
| outline: none !important; | |
| height: 3rem; | |
| width: 100%; | |
| margin: 0 0 20px 0 !important; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| -webkit-transition: all 0.3s; | |
| transition: all 0.3s; | |
| -webkit-appearance: textarea; | |
| background-color: white; | |
| -webkit-rtl-ordering: logical; | |
| flex-direction: column; | |
| resize: auto; | |
| cursor: text; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| padding: 2px; | |
| text-rendering: auto; | |
| color: initial; | |
| letter-spacing: normal; | |
| word-spacing: normal; | |
| text-transform: none; | |
| text-indent: 0px; | |
| text-shadow: none; | |
| display: inline-block; | |
| text-align: start; | |
| font: 400 11px system-ui; | |
| -webkit-writing-mode: horizontal-tb; | |
| } | |
| a i { | |
| color: #000000; | |
| opacity: .4; | |
| transition: 0.2s opacity ease-in-out; | |
| margin-left: 6px; | |
| } | |
| a:first-of-type i { | |
| margin-left: 0px; | |
| } | |
| a:hover i { | |
| opacity: .7; | |
| } | |
| .content-block p { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| /* TURN ON/OFF ACCESS FORM */ | |
| #wistiaVidContainer { | |
| filter: blur(3rem); | |
| } | |
| access |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment