<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 ----------> <div class="container d-flex justify-content-center"> <div class="d-flex flex-column justify-content-between"> <div class="card mt-3 p-5"> <div class="logo mb-3"><img src="https://imgur.com/zydrQCr.png"></div> <div> <p class="mb-1">Start managing your</p> <h4 class="mb-5 text-white">money with us!</h4> </div> <button class="btn btn-primary btn-lg"><small>Already signed up?</small><span> Log in</span> </button> </div> <div class="card two bg-white px-5 py-4 mb-3"> <div class="form-group"><input type="email" class="form-control" id="mail" required><label class="form-control-placeholder" for="mail">Email</label></div> <div class="form-group"><input type="text" class="form-control" id="name" required><label class="form-control-placeholder" for="name">Full Name</label></div> <div class="form-group"><input type="password" class="form-control" id="password" required><label class="form-control-placeholder" for="password">Password</label></div> <button class="btn btn-primary btn-block btn-lg mt-1 mb-2"><span>Get started<i class="fas fa-long-arrow-alt-right ml-2"></i></span></button> </div> </div> </div>

body { background-color: #EBEAEF } .container { flex-wrap: wrap } .card { border: none; border-radius: 10px; background-color: #4270C8; width: 350px; margin-top: -60px } p.mb-1 { font-size: 25px; color: #9FB7FD } .btn-primary { border: none; background: #5777DE; margin-bottom: 60px } .btn-primary small { color: #9FB7FD } .btn-primary span { font-size: 13px } .card.two { border-top-right-radius: 60px; border-top-left-radius: 0 } .form-group { position: relative; margin-bottom: 2rem } .form-control { border: none; border-radius: 0; outline: 0; border-bottom: 1.5px solid #E6EBEE } .form-control:focus { box-shadow: none; border-radius: 0; border-bottom: 2px solid #8A97A8 } .form-control-placeholder { position: absolute; top: 15px; left: 10px; transition: all 200ms; opacity: 0.5; font-size: 80% } .form-control:focus+.form-control-placeholder, .form-control:valid+.form-control-placeholder { font-size: 80%; transform: translate3d(0, -90%, 0); opacity: 1; top: 10px; color: #8B92AC } .btn-block { border: none; border-radius: 8px; background-color: #506CCF; padding: 10px 0 12px } .btn-block:focus { box-shadow: none } .btn-block span { font-size: 15px; color: #D0E6FF }