<span style="font-family: Arial, Helvetica, sans-serif;"><div class="btn fab"></div></span>
<div class="overlay"></div> <div id="error" class="fab"></div> <div id="success" class="fab"></div> <div class="flip-container"> <div class="flipper"> <div class="front"> <form class="contact"> <h1>Contact Us <div id="close" title="Close" class="close"></div> </h1> <div class="group"> <input type="text" id="user" required="required"/> <label for="user">Name</label> </div> <div class="group"> <input type="text" id="pass" required="required"/> <label for="pass">Email</label> </div> <div class="group"> <textarea id="msg" required="required"></textarea> <label for="msg">Your Message</label> </div> <button value="submit"></button> </form> </div> <div class="back"> <div class="msg"> <button class="close">Close</button> </div> </div> </div> </div>
$color: #673AB7; @mixin centered { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } body { background: #ccc url('https://goo.gl/ApfO58') top center no-repeat; background-size:cover; min-height:100vh; margin: 0; color: white; font-family: Roboto; } .overlay { background: rgba(55, 58, 71, 0.9); width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: auto; transition: .3s; &.hidden { visibility: hidden; opacity: 0; } } .btn { @include centered; background: $color url('http://goo.gl/Au4t6Z') center no-repeat; } .fab { position: absolute; width: 56px; height: 56px; margin: auto; border-radius: 50%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); cursor: pointer; transition: .3s; &.hidden { opacity: 0; visibility: none; } } #error { background: #F44336 url('http://goo.gl/HBjFUI') center no-repeat; top: 0; bottom: 0; right: 15px; } #success { background: #4CAF50 url('http://goo.gl/u7t9P3') center no-repeat; top: 0; bottom: 0; left: 15px; } .flip-container, .front, .back { width: 350px; height: 500px; } .flip-container { @include centered; perspective: 1000; transition: .3s; &.error .flipper { transform: rotateY(180deg); .back { background: #F44336 url('http://goo.gl/HBjFUI') 50% 56px no-repeat; background-size: 100px; button:hover { color: #F44336; } } } &.success .flipper { transform: rotateY(-180deg); .back { background: #4CAF50 url('http://goo.gl/u7t9P3') 50% 56px no-repeat; background-size: 100px; } } &.hidden { visibility: hidden; opacity: 0; transform: translateY(-100px); } } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden !important; position: absolute; top: 0; left: 0; transition: 1s; } .back { background-position: 50% 0; transform: rotateY(-180deg); .msg { text-align: center; margin: 175px auto 0 auto; font-family: Roboto; max-width: 90%; } button.close { color: white; width: 100px; height: 46px; border: 2px solid white; outline: none; background: rgba(white, .2); font: 400 18px Roboto; transition: .2s; position: absolute; margin: auto; left: 0; right: 0; bottom: 100px; &:hover { color: #4CAF50; background: white; } } } // Form form { @include centered; overflow: hidden; background: #F9F9F9; width: 350px; height: 500px; border-radius: 3px; box-shadow: 0 3px 36px 0 rgba(0, 0, 0, 0.6); position: relative; backface-visibility: hidden; h1 { text-align: center; background: $color; margin: 0; padding: 8px; font: 300 20px Roboto; #close { display: block; position: absolute; cursor: pointer; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%; background: url('http://goo.gl/GAZs3U') center no-repeat; transition: .2s; &:hover { background-color: rgba(white, .2); } } } button { display: block; cursor: pointer; width: 200px; height: 30px; color: white; background: $color url('http://goo.gl/u7t9P3') center no-repeat; margin: 15px auto; border: none; border-radius: 3px; box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2); transition: all 0.3s ease-in-out; &:hover { transform: translateY(-3px); box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2); } } } .group { width: 250px; position: relative; margin: auto; backface-visibility: hidden; } label { position: absolute; top: 7px; font: 400 15px Roboto; color: #A9A9A9; cursor: text; transition: .2s; } input { display: block; width: 250px; padding: 5px 0; margin-top: 30px; border: none; border-bottom: solid 1px $color; background: linear-gradient(to bottom, transparent 92%, $color 8%) no-repeat; background-position: -300px 0; background-size: 300px 100%; font-size: 15px; -webkit-transition: all 0.3s; transition: all 0.3s; // Stop that awful pale yellow background on auto-fill &:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #F9F9F9 inset; } &:focus, &:valid { background-position: 0 0; outline: none; ~label { top: -12px; font: 700 12px Roboto; color: $color; } } } textarea, textarea:focus { background: #F9F9F9; resize: none; border: 1px solid $color; outline: none; width: 230px; height: 230px; padding: 9px; font: 300 15px Roboto; margin-top: 30px; &:focus, &:valid { border: 3px solid $color; padding: 7px; ~label { top: 12px; left: 0; font: 700 12px Roboto; color: $color; } } ~label { display: block; top: 35px; left: 7px; } }
// Modal in/out animations $("#close ,.close ,.overlay").on('click', function(){ $(".flip-container ,.overlay ,#error ,#success").addClass("hidden"); $(".flip-container").removeClass("success error") }) $(".btn").on('click', function(){ $(".flip-container ,.overlay , #error ,#success").removeClass("hidden"); }) // Error message $("#error").on('click', function(){ $(".flip-container").removeClass("success") $(".flip-container").toggleClass("error"); $("#title").remove(); $(".msg").append("<h2 id='title'>That's an Error</h2>"); }) // Success message $("#success").on('click', function(){ $(".flip-container").removeClass("error") $(".flip-container").toggleClass("success"); $("#title").remove(); $(".msg").append("<h2 id='title'>Message Sent</h2>"); })