doctype html html head link(rel='stylesheet', href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous") //link(rel='stylesheet', href='/public/css/styles.css') style. body { padding: 40px 10px; background-color: #eee; } .listing-reg h1 { text-align: center; margin: 0 0 2rem; } /* css for registration form and errors*/ .form-registration { max-width: 330px; padding: 15px; margin: 0 auto; } .form-registration { display: flex; flex-direction: column; / / flex-wrap: wrap; } .form-registration input { width: 100%; margin: 0px 0 10px; } .form-registration .btn { / / flex: 1 0 100 %; } .my-errors { margin: 0 auto; padding: 0; list-style: none; color: #333; font-size: 1.2rem; display: table; } .my-errors li { margin: 0 0 1rem; } .my-errors li:before { content: "! Error : "; color: #f00; font-weight: bold; } /* Style the buttons inside the tab */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } body div.container.listing-reg h1 CAGI Registration Website -data = data || {} h2 center Forgot password if errors ul.my-errors for error in errors li= error.msg form(action="" method="POST" class="form-registration") label(for="email") Email: input( type="email" id="email" name="email" class="form-control" value=email size="30" readonly ) label(for="newPassword") New Password: input( type="password" name="newPassword" class="form-control" value=data.password ) input(type="submit" value="Submit" class="btn btn-lg btn-primary btn-block")