bONYwa

bonywa.markdown

bONYwa

A Pen by Sam on CodePen.

License.

index.html

<div id="app" class="_12bHx"><header><img src="/d3a8a2fe5911fcee6d9a5e0031b14d09.png" class="_1aOkZ"><a class="_3_v0R">Contact Us</a><a class="rxD_Q"><img src="/25ca52a31eac9cdce5249d6a49e5c04a.svg" class="rxD_Q"></a></header>
    <form onsubmit="(function(event) {
  event.preventDefault();
  fetch(event.target.action, { 
    method: 'POST',
    body: new URLSearchParams(new FormData(event.target))
  })
  .then(() => {event.target.style.opacity = 0; document.querySelector('.email-widget--confirmation').style.opacity = 1;})
})(event);" method="post" action="https://us-central1-vayner-speakers.cloudfunctions.net/api/email">

<div class="demo-card-square mdl-card mdl-shadow--2dp email-widget">
  <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text" id="email-widget-cta">Sign up for Vayner Speakers News</h2>
  </div>
  <div class="mdl-card__supporting-text">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" type="email"
							name="email"
							autoComplete="email"id="email" >
    <label class="mdl-textfield__label" for="sample3">Email...</label>
    
  </div>
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
  Sign Up
</button>
  </div>
</div>  
</form>
  
  <div class="demo-card-square mdl-card mdl-shadow--2dp email-widget email-widget--confirmation"><div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Thanks for joining!</h2>
  </div></div>
      
  
<section><script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shrOUtzsiOnrPbiay?backgroundColor=red" style="background: transparent; border: 1px solid #ccc;" frameborder="0" height="1479"></iframe></section></div>

script.js

(function(event) {
  event.preventDefault();
  fetch(event.target.action, { 
    method: 'POST',
    body: new URLSearchParams(new FormData(event.target))
  })
  .then((resp) => {
    document.getElementById('email-widget-cta').innerHtml = "Thanks for signing up!"
  })
})(event);

style.css

@import url(https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900);@-webkit-keyframes bounce{0%,20%,50%,80%,to{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@keyframes bounce{0%,20%,50%,80%,to{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}body,html{padding:0;margin:0;width:100%;font-family:Catamaran,sans-serif;font-weight:400;color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transition:none!important;transition:none!important;overflow-x:hidden;scroll-behavior:smooth}a,a:active,a:focus,a:visited{color:#000}a{text-decoration:none!important}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .5s cubic-bezier(.215,.61,.151,1);transition:all .5s cubic-bezier(.215,.61,.151,1);text-rendering:optimizeLegibility}a,h1,h2,h3,input,p{margin:0;color:#fff}button,input[type=checkbox],input[type=reset],input[type=submit]{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}@-webkit-keyframes _2qniQ{0%,20%,50%,80%,to{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@keyframes _2qniQ{0%,20%,50%,80%,to{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}._12bHx{z-index:-2}._12bHx header{background:linear-gradient(120deg,#abbaab,#fff 50%);height:100vh;width:100%;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-align:center;-ms-flex-align:center;align-items:center;padding:24px;-webkit-overflow-scrolling:touch;overflow-x:hidden;scroll-behavior:smooth}._12bHx header ._1aOkZ{width:80%;max-width:300px;max-height:400px}._12bHx header a{cursor:pointer}._12bHx header ._3_v0R{color:#275c4d;text-transform:uppercase;position:relative;display:block;overflow:hidden;width:100%;height:60px;max-width:180px;margin:2rem auto;border:4px solid currentColor;text-align:center;line-height:56px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}._12bHx header ._3_v0R:after,._12bHx header ._3_v0R:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-bottom:60px solid #013f2d;z-index:-1}._12bHx header ._3_v0R:before{right:-50px;border-right:50px solid transparent;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}._12bHx header ._3_v0R:after{left:-50px;border-left:50px solid transparent;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}._12bHx header ._3_v0R:hover{color:#fff}._12bHx header ._3_v0R:hover:before{-webkit-transform:translateX(-35%);-ms-transform:translateX(-35%);transform:translateX(-35%)}._12bHx header ._3_v0R:hover:after{-webkit-transform:translateX(35%);-ms-transform:translateX(35%);transform:translateX(35%)}._12bHx header .rxD_Q{margin-top:auto;width:40px;height:40px;-webkit-animation:_2qniQ 2s infinite;animation:_2qniQ 2s infinite}._12bHx section{border:8px solid #013f2d;-webkit-box-shadow:0 0 20px 10px rgba(0,0,0,.15);box-shadow:0 0 20px 10px rgba(0,0,0,.15);outline:none!important}._12bHx section iframe{width:100%}
.email-widget {
  z-index: 1;
  transition: opacity 480ms ease;
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 80vw;
  max-width: 440px;
}

.email-widget--confirmation {
  z-index: 0 !important;
  opacity: 0;
}