<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>
<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>
