<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- login start --> <div class="container register"> <div class="row"> <div class="col-md-3 register-left"> <img src="https://image.ibb.co/n7oTvU/logo_white.png" alt="" /> <h3>Welcome</h3> <p>You are 30 seconds away from earning your own money!</p> </div> <div class="col-md-9 register-right"> <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a> </li> <li class="nav-item"> <a class="nav-link" id="newuser-tab" data-toggle="tab" href="#newuser" role="tab" aria-controls="newuser" aria-selected="false">New User</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab"> <h3 class="register-heading">Login</h3> <div class="row register-form"> <div class="col-md-12 profile_card"> <form class="form-inline"> <div class="form-group"> <i class="fa fa-envelope-o"></i> <input type="text" class="form-control" placeholder="Email" value="" /> </div> <div class="form-group"> <i class="fa fa-lock"></i> <input type="password" class="form-control" placeholder="Password *" value="" /> </div> <div class="float-right"> <input type="submit" class="btn btn-primary" value="Register" /> </div> </form> </div> </div> </div> <div class="tab-pane fade show" id="newuser" role="tabpanel" aria-labelledby="newuser-tab"> <h3 class="register-heading">New User</h3> <div class="row register-form"> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="First Name *" value="" /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Last Name *" value="" /> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="Email *" value="" /> </div> <div class="form-group"> <input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="password" class="form-control" placeholder="Password *" value="" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Confirm Password *" value="" /> </div> <div class="float-right"> <input type="submit" class="btn btn-primary" value="Register" /> </div> </div> </div> </div> </div> </div> </div> </div>

/* register */ .tab-content>.tab-pane { display: block; } #myTabContent { position: relative; width: 100%; height: 370px; z-index: 5; overflow: hidden; } #myTabContent .tab-pane { position: absolute; top: 0; padding: 10px 40px; z-index: 1; opacity: 0; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -o-transition: all linear 0.3s; -ms-transition: all linear 0.3s; transition: all linear 0.3s; } #login, .content-3 { -webkit-transform: translateX(-250px); -moz-transform: translateX(-250px); -o-transform: translateX(-250px); -ms-transform: translateX(-250px); transform: translateX(-250px); } #newuser, .content-4 { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -o-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } .register .register-right ul .nav-item:a.active~#myTabContent #login, .register .register-right ul .nav-item:a.active~#myTabContent .content-2, .register .register-right ul .nav-item:a.active~#myTabContent #newuser, { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); z-index: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; } @keyframes page { 0% { left: 0; } 50% { left: 10px; } 100% { left: 0; } } @-moz-keyframes page { 0% { left: 0; } 50% { left: 10px; } 100% { left: 0; } } @-webkit-keyframes page { 0% { left: 0; } 50% { left: 10px; } 100% { left: 0; } } @-ms-keyframes page { 0% { left: 0; } 50% { left: 10px; } 100% { left: 0; } } @-o-keyframes page { 0% { left: 0; } 50% { left: 10px; } 100% { left: 0; } } .register { background: -webkit-linear-gradient(left, #1143a6, #00c6ff); margin-top: 3%; padding: 3%; } .register-left { text-align: center; color: #fff; margin-top: 4%; } .register-left input { border: none; border-radius: 1.5rem; padding: 2%; width: 60%; background: #f8f9fa; font-weight: bold; color: #383d41; margin-top: 30%; margin-bottom: 3%; cursor: pointer; } .register-right { background: #f8f9fa; border-top-left-radius: 15% 50%; border-bottom-left-radius: 15% 50%; } .register-left img { margin-top: 15%; margin-bottom: 5%; width: 25%; -webkit-animation: mover 2s infinite alternate; animation: mover 1s infinite alternate; } @-webkit-keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } @keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } .register-left p { font-weight: lighter; padding: 12%; margin-top: -9%; } .register .register-form { } .register .nav-tabs { margin-top: 1%; border: none; background: #0062cc; border-radius: 20px; width: 35%; float: right; } #myTab .nav-item { padding: 5px 3px; text-align: center; display: block; margin: 0px 6px; } .register .nav-tabs .nav-link { padding: 10px 8px; height: 25px; color: #fff; font-size: 13px; border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } .register .nav-tabs .nav-link:hover { border: none; } .register .nav-tabs .nav-link.active { color: #1143a6; border: 1px solid #1143a6; border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; } .register-heading { text-align: center; color: #1143a6; } #login.active { -webkit-transform: translateX(0px); transform: translateX(0px); z-index: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; } #newuser.active { -webkit-transform: translateX(0px); transform: translateX(0px); z-index: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; }