"big form layout test"
Bootstrap 3.3.0 Snippet by rayrc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="home" lang="en"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><head><meta charset="utf-8"> <title>Big Scale Signup Form</title><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width"><link rel="icon" href="favicon.ico" ><link rel="stylesheet" href="new.css"><script src=""></script> </head> <body><div id="main" role="main"> <div class="login" > <h1 class="login-description">Sign Up</h1></div><form method="post" action="/signup" ><input type="hidden" name="t" ><div class="signupForm"><div class="signupField-wrap" ><div class="signupField-shakeWrap" ><div class="signupField is-active signupField--text" ><span ></span><label class="signupField-label" ><span ><span >What’</span><i class="u-tightenKerning" >s</i><span > your email?</span></span></label><input class="signupField-input" name="email" type="text" placeholder="webmx.me" spellcheck="false" autocomplete="off" ><button type="button" class="signupField-nextButton"><svg viewBox="0 0 23 24"><path d="M23 12H0m10.5 11L23 12 10.5 1" stroke="#88CFE8" stroke-linecap="round" fill="none"></path></svg></button></div></div></div><div class="signupField-wrap" ><div class="signupField-shakeWrap" ><div class="signupField signupField--text" ><span ></span><label class="signupField-label" >Where do you work?</label><input class="signupField-input" name="company" type="text" placeholder="My Company" spellcheck="false" autocomplete="off"><button type="button" class="signupField-nextButton"><svg viewBox="0 0 23 24" ><path d="M23 12H0m10.5 11L23 12 10.5 1" stroke="#88CFE8" stroke-linecap="round" fill="none" ></path></svg></button></div></div></div><div class="signupField-wrap" ><div class="signupField-shakeWrap" ><div class="signupField signupField--text" ><span ></span><label class="signupField-label"><span ><span >What’</span><i class="u-tightenKerning" >s</i><span > your name?</span></span></label><input class="signupField-input" name="name" type="text" placeholder="First Last" spellcheck="false" autocomplete="off" ><button type="button" class="signupField-nextButton" ><svg viewBox="0 0 23 24" ><path d="M23 12H0m10.5 11L23 12 10.5 1" stroke="#88CFE8" stroke-linecap="round" fill="none" ></path></svg></button></div></div></div><div class="signupField-wrap" ><div class="signupField-shakeWrap" ><div class="signupField signupField--password"><span ></span><label class="signupField"></svg></button></div></div></div></div><div class="dotNav" ><span type="button" class="dotNav-item is-active" ></span><span type="button" class="dotNav-item"></span><span type="button" class="dotNav-item" ></span><span type="button" class="dotNav-item" ></span><span type="button" class="dotNav-item" "></span></div></form></div></div><script src=""></script></body></html>
<style> a { position: relative; margin: 50px; padding: 30px; display: block; text-decoration: none; color: #567489; font-family: sans-serif; border: 1px solid gray; text-align: center } a:hover:before { -webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1); -moz-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1); -o-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1); -ms-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1); transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } a:before { content: ""; position: absolute; width: 80px; height: 80px; display: block; margin-top: -40px; margin-left: -40px; left: 50%; top: 50%; opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-border-radius: 100%; border-radius: 100%; background-color: #1890E6; } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; } body { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; background-color: #1d1d1f; color: #e8e8ea; } .login-header { position: absolute; top: 50px; left: 50px; -webkit-animation: fadeRight 200ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeRight 200ms cubic-bezier(0.5, 0.2, 0.3, 1); } .is-mobile { padding: 0 15px; } .is-mobile .login-header { padding-top: 10px; position: static; text-align: left; } .is-mobile .login-description { font-size: 24px; } .login-logo { display: inline-block; width: 50px; vertical-align: top; } .login-description { display: inline-block; margin: 2px 0 0 10px; line-height: 50px; font-weight: 300; vertical-align: top; } .signupForm, .loginForm, .forgotForm { position: absolute; width: 800px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -55%); -ms-transform: translate(-50%, -55%); transform: translate(-50%, -55%); } @media screen and (max-width: 800px) { .communityRegister { padding: 200px 20px 0 20px; } .communityRegister .login-header { top: 20px; left: 20px; } .communityRegister .login-description { font-size: 24px; } .communityRegister .signupForm { position: static; width: 100%; margin: 0 auto; -webkit-transform: none; -ms-transform: none; transform: none; } .communityRegister .signupField-input { font-size: 40px; } .communityRegister ::-webkit-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 40px !important; color: #444446; -webkit-font-smoothing: antialiased; } .communityRegister ::-moz-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 40px !important; color: #444446; } .communityRegister .signupField-nextButton { position: absolute; display: block; bottom: 14px; right: 0; background: none; border: 0 none; } .communityRegister .signupField-nextButton svg { width: 32px; height: 33px; } } .loginForm, .forgotForm { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 500px; } .loginForm--mobile, .forgotForm--mobile { margin-top: 60px; position: static; width: 100%; top: auto; left: auto; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .loginForm--mobile .loginForm-field, .forgotForm--mobile .loginForm-field { margin-bottom: 20px; } .loginForm--mobile .loginField, .forgotForm--mobile .loginField { display: block; -webkit-animation: none; animation: none; } .loginForm--mobile .loginField:last-of-type, .forgotForm--mobile .loginField:last-of-type { margin-bottom: 10px; } .loginForm--mobile .loginForm-label, .forgotForm--mobile .loginForm-label, .loginForm--mobile .forgotForm-label, .forgotForm--mobile .forgotForm-label { font-size: 16px; } .loginForm--mobile .loginForm-input, .forgotForm--mobile .loginForm-input, .loginForm--mobile .forgotForm-input, .forgotForm--mobile .forgotForm-input { font-size: 32px; padding: 4px 0 8px 0; line-height: 1 !important; } .loginForm--mobile ::-webkit-input-placeholder, .forgotForm--mobile ::-webkit-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 32px !important; line-height: 1.4 !important; color: #444446; -webkit-font-smoothing: antialiased; } .loginForm--mobile ::-moz-input-placeholder, .forgotForm--mobile ::-moz-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 32px !important; line-height: 1.4 !important; color: #444446; } .loginForm--mobile .loginSubmit-button, .forgotForm--mobile .loginSubmit-button, .loginForm--mobile .forgotSubmit-button, .forgotForm--mobile .forgotSubmit-button { display: block; width: 100%; margin-top: 30px; } .loginForm--mobile .loginForm-error, .forgotForm--mobile .loginForm-error, .loginForm--mobile .forgotForm-error, .forgotForm--mobile .forgotForm-error { position: static; margin-bottom: 10px; top: auto; left: auto; font-weight: 600; color: #ea3c43; -webkit-animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .loginForm--mobile .signupSubmit-terms, .forgotForm--mobile .signupSubmit-terms { display: block; margin: 15px auto 30px auto; text-align: center; } .loginForm-field, .forgotForm-field { position: relative; margin-bottom: 40px; border-bottom: 1px solid #414143; -webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .loginForm-field--password { -webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .loginForm-weird-questionmark { font-family: Avenir, Arial; font-style: normal; } .loginForm-label, .forgotForm-label { display: block; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: #808082; } .loginForm-input, .forgotForm-input { position: relative; width: 100%; padding: 8px 30px 8px 0; letter-spacing: -1px; font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-weight: 300; font-size: 48px; color: #e8e8ea; background: none; border: none; } .loginForm-input:focus, .forgotForm-input:focus { outline: none; } .loginForm ::-webkit-input-placeholder, .forgotForm ::-webkit-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 48px; color: #444446; -webkit-font-smoothing: antialiased; } .loginForm ::-moz-input-placeholder, .forgotForm ::-moz-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 48px; color: #444446; } .loginForm.loginForm-field--password ::-webkit-input-placeholder { font-family: "Courier New"; } .loginForm.loginForm-field--password ::-moz-input-placeholder { font-family: "Courier New"; } .loginSubmit { -webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .loginSubmit-button { padding: 12px 40px; border: 0 none; border-radius: 2px; font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: #fff; background-color: #009fe4; -webkit-transition: -webkit-transform 300ms ease; transition: transform 300ms ease; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .loginSubmit-button:hover { background-color: #009cdf; } .loginSubmit-button:active { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } .loginSubmit-button:focus { outline: none; } .loginForm-error, .forgotForm-error, .forgotForm-confirmation { position: absolute; top: -40px; left: 0; font-weight: 600; color: #ea3c43; -webkit-animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1) 200ms; animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1) 200ms; } .forgotForm-confirmation { color: #61d67f; } .loginForm-forgotLink { letter-spacing: 1px; color: #e8e8ea; text-decoration: none; font-weight: 400; } .signupForm--mobile { margin-top: 20px; position: static; width: 100%; top: auto; left: auto; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .signupForm--mobile .signupField { display: block; margin-bottom: 20px; -webkit-animation: none; animation: none; } .signupForm--mobile .signupField:last-of-type { margin-bottom: 10px; } .signupForm--mobile .signupField-label { font-size: 14px; } .signupForm--mobile .signupField-input { font-size: 32px; padding: 4px 0 8px 0; line-height: 1 !important; } .signupForm--mobile ::-webkit-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 32px !important; line-height: 1.4 !important; color: #444446; -webkit-font-smoothing: antialiased; } .signupForm--mobile ::-moz-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 32px !important; line-height: 1 !important; color: #444446; } .signupForm--mobile .signupSubmit-button { display: block; width: 100%; margin-bottom: 10px; } .signupForm--mobile .signupSubmit-terms { display: block; margin: 20px auto 30px auto; text-align: center; } .signupForm--mobile .signupSubmit-terms a { display: block; } .signupForm--mobile .signupField-error { position: static; margin-bottom: 10px; top: auto; left: auto; font-weight: 600; color: #ea3c43; -webkit-animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .signupField { display: none; position: relative; border-bottom: 1px solid #414143; -webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } .signupField.is-active { display: block; } .signupField-wrap.is-exiting { -webkit-animation: zoomLeft 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: zoomLeft 400ms cubic-bezier(0.5, 0.2, 0.3, 1); opacity: 0; } .signupField-shakeWrap.is-errored { -webkit-animation: shake 300ms ease; animation: shake 300ms ease; } .signupField-error { position: absolute; top: -40px; left: 0; font-weight: 600; color: #ea3c43; -webkit-animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1) 200ms; animation: fadeDown 400ms cubic-bezier(0.5, 0.2, 0.3, 1) 200ms; } .signupField-label { display: block; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: #808082; } .signupField-input { position: relative; width: 100%; padding: 8px 40px 8px 0; letter-spacing: -1px; font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-weight: 300; font-size: 72px; color: #e8e8ea; background: none; border: none; } .signupField-input:focus { outline: none; } .signupField-nextButton { position: absolute; display: block; bottom: 32px; right: 0; background: none; border: 0 none; } .signupField-nextButton:focus, .signupField-nextButton:active { outline: none; } .signupField-nextButton:hover svg { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } .signupField-hint { position: absolute; bottom: -32px; right: 0; color: #808082; -webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .signupField-nextButton svg { width: 40px; height: 42px; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .signupField-input:active { outline: none; } .signupField--password .signupField-input { letter-spacing: -10px; } .signupSubmit { -webkit-animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); animation: fadeUp 400ms cubic-bezier(0.5, 0.2, 0.3, 1); } .signupSubmit-heading, .signupSubmit-subheading { margin: 0; } .signupSubmit-heading { font-size: 72px; line-height: 1.2; letter-spacing: -1px; font-weight: 300; } .signupSubmit-heading .u-tightenKerning { margin-left: -10px; } .signupSubmit-subheading { font-size: 32px; font-weight: 300; color: #808082; } .signupSubmit-button { display: inline-block; margin-top: 30px; padding: 12px 40px; border: 0 none; border-radius: 2px; font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: #fff; background-color: #009fe4; -webkit-transition: -webkit-transform 300ms ease; transition: transform 300ms ease; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .signupSubmit-button:hover { background-color: #009cdf; } .signupSubmit-button:active { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } .signupSubmit-button:focus { outline: none; } .signupSubmit-terms { display: inline-block; margin-left: 10px; font-size: 14px; color: #808082; } .signupSubmit-terms a { color: #ccccce; } .dotNav { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .dotNav-item { display: block; margin: 16px 0; height: 10px; width: 10px; background-color: rgba(255,255,255,0.25); border-radius: 10px; -webkit-transition: all 300ms cubic-bezier(0.5, 0.2, 0.3, 1); transition: all 300ms cubic-bezier(0.5, 0.2, 0.3, 1); cursor: pointer; } .dotNav-item.is-active { background: transparent; box-shadow: 0 0 0 2px #fff; } .dotNav-item.is-complete { background-color: #fff; } .dotNav-item.is-active.is-complete { background-color: rgba(255,255,255,0.25); } .signupForm ::-webkit-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 72px; color: #444446; -webkit-font-smoothing: antialiased; } .signupForm ::-moz-input-placeholder { font-family: "futura-pt", "Avenir Next", "Avenir", "Futura", "Trebuchet MS", sans-serif; font-size: 72px; color: #444446; } .u-tightenKerning { font-style: normal; margin-left: -2px; } @-webkit-keyframes fadeRight { 0% { opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes fadeRight { 0% { opacity: 0; -ms-transform: translateX(-50px); transform: translateX(-50px); } 100% { opacity: 1; -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeRight { 0% { opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes fadeUp { 0% { opacity: 0; -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fadeUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes fadeDown { 0% { opacity: 0; -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fadeDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes zoomLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-1000px); transform: translateX(-1000px); } } @-ms-keyframes zoomLeft { 0% { opacity: 1; -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-transform: translateX(-1000px); transform: translateX(-1000px); } } @keyframes zoomLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-1000px); transform: translateX(-1000px); } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 33% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 66% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @-ms-keyframes shake { 0%, 100% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(-10px, 0, 0); } 66% { transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 33% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 66% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } }

Related: See More


Questions / Comments: