<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"> <div class="row"> <div id='divlogin'> <h3>LOGIN</h3> <div id='divform'> <form id='formlogin'> <label for='em' >E-mail</label> <input id='em' type='email' required placeholder="digite seu e-mail"> <label for='pas' >Senha</label> <input id='pas' required type='password' placeholder='digite a senha'> <input id="but" type='button' value='entrar'> </form> </div> <a href='#' style='text-decoration:none;'>Precisa de ajuda?</a> <p id='erro'>Senha ou E-mail incorretos</p> </div> </div> <div class='row'> <div class='col text-center'> <footer>Me siga no instagram @augusto_brz</footer> </div> </div> </div>

body{ margin:0; padding:0; font-family:arial; display:flex; flex-direction:column; } #divlogin{ margin:50px auto; box-shadow:0px 0px 5px 0px; width:450px; padding:30px; } h3{ color:#45baf0; text-align:center; } label{ color:#7a6b6b; } #formlogin{ margin:0 auto; display:flex; flex-direction:column; width:400px; } input{ padding:5px; outline-color:blue; border-radius:5px; border-color:#45baf0; } #but{ width:250px; padding:5px; margin:20px auto; background-color:#45baf0; border:none; text-transform:uppercase; border-radius:5px; color:white; } #but:hover{ background-color:#3e5094; cursor:pointer; } a{ float:right; color:gray; margin-right:10px; } #erro{ color:red; float:left; } footer{ color:#555252; margin 0 auto; }

$(function(){ $('#erro').hide(); $('#but').click(function(){ var email = $('#em').val(); var password = $('#pas').val(); if(email=='admin' && password=='123456789009876543211234567890'){ $('#erro').hide(); alert('Continuar'); }else{ $('#erro').show(); } }); });