h6{ color: #fff; font-family:'Times New Roman', Times, serif; font-style: italic; } .login-box{ width:550px; margin:auto; min-width:750px; min-height:670px; position:relative; background:url(https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80) no-repeat center; box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19); border-radius: 50px; } .login-snip{ width:100%; height:100%; position:absolute; padding:90px 70px 50px 70px; background:rgba(82, 46, 23, 0.9); border-radius: 50px; } .login-snip .login, .login-snip .sign-up-form{ top:0; left:0; right:0; bottom:0; position:absolute; transform:rotateY(180deg); backface-visibility:hidden; transition:all .4s linear; } .login-snip .sign-in, .login-snip .sign-up, .login-space .group .check{ display:none; } .login-snip .tab, .login-space .group .label, .login-space .group .button{ text-transform:uppercase; } .login-snip .tab{ font-size:22px; margin-right:15px; padding-bottom:5px; margin:0 15px 10px 0; display:inline-block; border-bottom:2px solid transparent; } .login-snip .sign-in:checked + .tab, .login-snip .sign-up:checked + .tab{ color:#fff; border-color:#1161ee; } .login-space{ min-height:345px; position:relative; perspective:1000px; transform-style:preserve-3d; } .login-space .group{ margin-bottom:15px; } .login-space .group .label, .login-space .group .input, .login-space .group .button{ width:100%; color:#fff; display:block; border-radius:25px; } .login-space .group .input, .login-space .group .button{ border:none; padding:15px 20px; background:rgba(255,255,255,.1); } .login-space .group input[data-type="password"]{ text-security:circle; -webkit-text-security:circle; } .login-space .group .button{ background:#1161ee; width: 600px; } .login-space .group label .icon{ width:15px; height:15px; position:relative; display:inline-block; background:rgba(255,255,255,.1); border-radius:25px; } .login-snip .sign-in:checked + .tab + .sign-up + .tab + .login-space .login{ transform:rotate(0); } .login-snip .sign-up:checked + .tab + .login-space .sign-up-form{ transform:rotate(0); } .card{ width: 500px; left: 100px; } ::placeholder{ color: #000000; }