"card"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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=''> <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/JeromeRenders/pen/EPNxPv?depth=everything&order=popularity&page=44&q=translate&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">body { background: #33cc33; font-family: sans-serif; } body fieldset { box-shadow: 0 8px 10px #29a329; } body.error { background: #f04000; } body.error fieldset { box-shadow: 0 8px 10px #bd3200; } h1, h2 { position: absolute; left: 50%; transform: translateX(-50%); font-family: sans-serif; text-transform: uppercase; letter-spacing: 2px; } h1 { top: 24px; color: white; font-size: 12px; } h2 { top: 44px; color: white; font-size: 10px; opacity: 0.7; } ul.items { position: absolute; width: 30px; height: auto; top: 50%; left: -60px; transform: translateY(-50%); } ul.items li { width: 8px; height: 8px; margin: 10px 0; background: white; border-radius: 50%; opacity: 0.4; cursor: pointer; } ul.items li.active { opacity: 1; } form { position: absolute; width: 300px; height: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%); } form fieldset { position: absolute; width: 300px; height: 60px; background: white; border-radius: 3px; opacity: 0; transform: scale(0.2); transition: all 0.4s ease-in-out; } form fieldset input, form fieldset p { display: inline-block; width: 200px; margin-left: 50px; color: #333333; font-size: 16px; letter-spacing: 1px; } form fieldset p { margin-top: 22px; text-align: center; } form fieldset input { height: 40px; margin-top: 8px; border: none; outline: none; } form fieldset .icon { position: absolute; width: 30px; height: 30px; top: 15px; transition: all 0.4s ease; } form fieldset .icon i { position: absolute; display: block; } form fieldset .icon i::before, form fieldset .icon i::after { position: absolute; content: ""; } form fieldset .icon.left { left: 10px; } form fieldset .icon.right { right: 10px; cursor: pointer; } form fieldset .icon.button:hover { background: #f2f2f2; border-radius: 3px; transition: all 0.4s ease; } form fieldset.enable { z-index: 1; opacity: 1; transition: all 0.5s ease-out 0.2s; transform: scale(1); animation: enable 0.5s ease-out 0.2s; } form fieldset.disable { opacity: 0; transition: all 0.3s ease-in; transform: translateY(120px) scale(0.9); } body.error fieldset { transform-origin: 50% 100%; animation: error 0.3s ease-out; } @keyframes enable { 0% { opacity: 0; transform: scale(0.2); } 60% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes error { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } /** * Icons in CSS, long as f**** */ .icon .arrow { width: 2px; height: 17px; top: 5px; left: 14px; background: #333333; } .icon .arrow::before { width: 6px; height: 6px; bottom: -1px; left: -3px; border-color: #333333; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); } .icon .user { width: 20px; height: 10px; bottom: 5px; left: 5px; box-shadow: 0 0 0 2px #333333 inset; border-radius: 6px 6px 3px 3px; } .icon .user::before { width: 10px; height: 10px; top: -9px; left: 5px; box-shadow: 0 0 0 2px #333333 inset; border-radius: 50%; } .icon .letter { width: 20px; height: 12px; top: 9px; left: 5px; box-shadow: 0 0 0 2px #333333 inset; border-radius: 3px; } .icon .letter::before, .icon .letter::after { width: 11px; height: 2px; top: 4px; background: #333333; } .icon .letter::before { left: 0; transform: rotate(30deg); } .icon .letter::after { right: 0; transform: rotate(-30deg); } .icon .lock { width: 20px; height: 16px; top: 9px; left: 5px; box-shadow: 0 0 0 2px #333333 inset; border-radius: 3px; } .icon .lock::before { width: 8px; height: 8px; top: -4px; left: 4px; border: 2px solid transparent; border-top: 2px solid #333333; border-right: 2px solid #333333; border-radius: 50%; transform: rotate(-45deg); } .icon .lock::after { width: 6px; height: 7px; top: 4px; left: 7px; box-shadow: 0 0 0 2px #333333 inset; } .icon .heart { width: 10px; height: 10px; top: 11px; left: 7px; background: #ff5233; transform: rotate(45deg); } .icon .heart::before, .icon .heart::after { width: 10px; height: 10px; border-radius: 50%; background: #ff5233; } .icon .heart::before { left: -6px; } .icon .heart::after { top: -6px; } </style></head><body> <h1>Step by step form</h1> <h2>Just practising Javascript</h2> <form> <ul class="items"></ul> <fieldset class="username enable"> <div class="icon left"><i class="user"></i></div> <input type="text" name="username" placeholder="Username"/> <div class="icon right button"><i class="arrow"></i></div> </fieldset> <fieldset class="email"> <div class="icon left"><i class="letter"></i></div> <input type="mail" name="email" placeholder="Email"/> <div class="icon right button"><i class="arrow"></i></div> </fieldset> <fieldset class="password"> <div class="icon left"><i class="lock"></i></div> <input type="password" name="password" placeholder="Password"/> <div class="icon right button"><i class="arrow"></i></div> </fieldset> <fieldset class="thanks"> <div class="icon left"><i class="heart"></i></div> <p>Thanks for your time</p> <div class="icon right"><i class="heart"></i></div> </fieldset> </form> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/** * Surely there's some improvements to make, comments/help always appreciated :3 */ function init() { // Generate li foreach fieldset for (var i = 0; i < count; i++) {if (window.CP.shouldStopExecution(1)){break;} var ul = document.querySelector('ul.items'), li = document.createElement("li"); ul.appendChild(li); } window.CP.exitedLoop(1); // Add class active on first li ul.firstChild.classList.add('active'); } function next(target) { var input = target.previousElementSibling; // Check if input is empty if (input.value === '') { body.classList.add('error'); } else { body.classList.remove('error'); var enable = document.querySelector('form fieldset.enable'), nextEnable = enable.nextElementSibling; enable.classList.remove('enable'); enable.classList.add('disable'); nextEnable.classList.add('enable'); // Switch active class on left list var active = document.querySelector('ul.items li.active'), nextActive = active.nextElementSibling; active.classList.remove('active'); nextActive.classList.add('active'); } } function keyDown(event) { var key = event.keyCode, target = document.querySelector('fieldset.enable .button'); if (key == 13 || key == 9) next(target); } var body = document.querySelector('body'), form = document.querySelector('form'), count = form.querySelectorAll('fieldset').length; window.onload = init; document.body.onmouseup = function (event) { var target = event.target || event.toElement; if (target.classList.contains("button")) next(target); }; document.addEventListener("keydown", keyDown, false); //# sourceURL=pen.js </script> </body></html>

Related: See More

Rotating CSS Card
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: