por HuemersonFMG Seg 06 Fev 2023, 13:40
![Simples Página de Login em HTML - Visual Studio Code Scree166](https://i.servimg.com/u/f33/19/92/85/47/scree166.png)
Simples Página de Login em HTML - Visual Studio Code
- Código:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página de Login || FMGarcia</title>
<style>
body {padding: 0; margin: 0; background-color: #6404ff;}
#login {display: flex; align-items: center; justify-content: center; height: 100vh; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
.card {text-align: center; background-color: rgba(19, 19, 19, 0.3); padding: 40px; border-radius: 2px; width:280px;}
.card-header {padding-bottom: 50px; opacity: 0.8; color: #fff;}
.card-header::after {content: ""; width: 100%; height: 5px; background-color: rgb(223, 247, 7); display: block;margin-top: -17px; margin-left: -5px;}
.card-content label {color: #fff; font-size: 12px; opacity: 0.8;}
.card-content-area { display: flex; flex-direction: column; padding:10px 0;}
.card-content-area input {margin-top: 10px; padding:0 5px; background-color: transparent;border:none; border-bottom: 1px solid #e1e1e1; outline: none; color: #fff;}
.card-footer {display: flex; flex-direction: column;}
.card-footer .submit{width: 100%; height: 40px; background-color: #04f811; border:none; color:#300ada; margin: 10px 0; size: 30;}
.card-footer a {text-align: center; font-size: 30px; opacity: 0.8; color: #fff; text-decoration: none;}
</style>
</head>
<body>
<div id="login">
<form class="card">
<div class="card-header">
<h2>FM Garcia - Login</h2>
</div>
<div class="card-content">
<div class="card-content-area">
<label for="usuario">Usuário</label>
<input type="text" id="usuario" autocomplete="off">
</div>
<div class="card-content-area">
<label for="password">Senha</label>
<input type="password" id="password" autocomplete="off">
</div>
</div>
<div class="card-footer">
<input type="submit" value="LOGIN" class="submit">
<a href="#" class="recuperar_senha">Reculperar senha.</a>
</div>
</form>
</div>
</body>
</html>
» Modelos para Mensagens
» Modelo API Chamada Externa - Rest
» Sistema de Ceps Brasileiro
» Esqueceu o número do seu telefone?
» Scripts SQL - Oracle
» Dicas para Excel
» Acentos e Caracteres Especiais em HTML
» Dez motivos para consumir mais café...
» Combinações de teclas do Windows
» PL/SQL - Extensão da linguagem SQL - Oracle
» Node.js é uma tecnologia assíncrona
» Pontos Cardeais
» 1º DE MAIO – DIA MUNDIAL DO TRABALHO
» ChatGPT - robô virtual (chatbot) que responde a perguntas variadas