<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 ----------> <h2> Login Social </h2> <div class="container"> <form action="/action_page.php"> <div class="row"> <h2 style="text-align:center"> Rede social ou Manualmente</h2> <div class="vl"> <span class="vl-innertext">ou</span> </div> <div class="col"> <a href="entrarcomface.html" class="fb btn"> <i class="fa fa-facebook fa-fw"></i> Login Facebook </a> <a href="entrarcomgoogle.html" class="google btn"><i class="fa fa-google fa-fw"> </i> Login Google+ </a> </div> <div class="col"> <div class="hide-md-lg"> <p>ou login MAnual:</p> </div> <input type="text" name="Nome" placeholder="Nome" required> <input type="Senha" name="Senha" placeholder="Senha" required> <input type="submit" value="Login"> </div> </div> </form> </div> <div class="bottom-container"> <div class="row"> <div class="col"> <a href="senha.html" style="color:white" class="btn">inscrever-se</a> </div> <div class="col"> <a href="loginprivado.html" style="color:white" class="btn"> Administrativo</a> </div> </div> </div>

{ font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } /* estilizar recipiente */ .container { position: relative; border-radius: 5px; background-color: #f2f2f2; padding: 20px 0 30px 0; } /* botoes de link */ input, .btn { width: 100%; padding: 12px; border: none; border-radius: 4px; margin: 5px 0; opacity: 0.85; display: inline-block; font-size: 17px; line-height: 20px; text-decoration: none; /* remover sublinhados */ } input:hover, .btn:hover { opacity: 1; } /* adicionar cores para os botes do face e do google */ .fb { background-color: #3B5998; color: white; } .google { background-color: #dd4b39; color: white; } /* botao de envio */ input[type=submit] { background-color: #4CAF50; color: white; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } /* layout das colunas */ .col { float: left; width: 50%; margin: auto; padding: 0 50px; margin-top: 6px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* vertical line */ .vl { position: absolute; left: 50%; transform: translate(-50%); border: 2px solid #ddd; height: 175px; } /* text inside the vertical line */ .vl-innertext { position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 50%; padding: 8px 10px; } /* esconder texto em telas medias e grandes */ .hide-md-lg { display: none; } /* recipiente inferior */ .bottom-container { text-align: center; background-color: #666; border-radius: 0px 0px 4px 4px; } /* Para empilhar as colunas uma em baixo da outra quando estiver a tela 650px*/ @media screen and (max-width: 650px) { .col { width: 100%; margin-top: 0; } /* coluna vertical */ .vl { display: none; } /*mostrar o texto oculto */ .hide-md-lg { display: block; text-align: center; } }