<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Questrial&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="hero is-success is-fullheight"> <div class="hero-body"> <div class="container has-text-centered"> <div class="column is-4 is-offset-4"> <h3 class="title has-text-black">Login</h3> <hr class="login-hr"> <p class="subtitle has-text-black">Please login to proceed.</p> <div class="box"> <figure class="avatar"> <img src="https://placehold.it/128x128"> </figure> <form> <div class="field"> <div class="control"> <input class="input is-large" type="email" placeholder="Your Email" autofocus=""> </div> </div> <div class="field"> <div class="control"> <input class="input is-large" type="password" placeholder="Your Password"> </div> </div> <div class="field"> <label class="checkbox"> <input type="checkbox"> Remember me </label> </div> <button class="button is-block is-info is-large is-fullwidth">Login <i class="fa fa-sign-in" aria-hidden="true"></i></button> </form> </div> <p class="has-text-grey"> <a href="../">Sign Up</a>  ·  <a href="../">Forgot Password</a>  ·  <a href="../">Need Help?</a> </p> </div> </div> </div> </section>

html,body { font-family: 'Questrial', sans-serif; font-size: 14px; font-weight: 300; } .hero.is-success { background: #F2F6FA; } .hero .nav, .hero.is-success .nav { -webkit-box-shadow: none; box-shadow: none; } .box { margin-top: 5rem; } .avatar { margin-top: -70px; padding-bottom: 20px; } .avatar img { padding: 5px; background: #fff; border-radius: 50%; -webkit-box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); } input { font-weight: 300; } p { font-weight: 700; } p.subtitle { padding-top: 1rem; } .login-hr{ border-bottom: 1px solid black; } .has-text-black{ color: black; } .field{ padding-bottom: 10px; } .fa{ margin-left: 5px; }