Como Criar uma Tela de Login Responsiva do Zero

dezembro 12, 2024 post escrito por em Tutorial — , , ,

Uma tela de login é essencial em qualquer aplicação que requer autenticação, e aprender a criar uma pode ser o primeiro passo para projetos incríveis. Neste tutorial, você vai criar uma tela de login funcional e responsiva, com campos para email e senha, links para recuperação de senha e cadastro, e uma estética profissional.

O que vamos construir?

A tela será composta por:

  • Um campo de email e outro de senha.
  • Um botão para login.
  • Links para recuperação de senha e cadastro.
  • Um design responsivo que funciona bem em diferentes tamanhos de tela.

Pré-requisitos

  • Conhecimentos básicos em HTML e CSS.
  • Um editor de código como o VS Code.
  • Um navegador para visualizar o resultado.

Estrutura do Código HTML

Começaremos criando a estrutura básica da nossa página. Aqui está o HTML completo:

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <title>Tela de Login</title>
    
</head>

<body>
    <div class="login-container">
        <img src="logoipsum-344.svg" alt="Logo">
        <h1>Login</h1>
        <form>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="Seu email" required>
            </div>
            <div class="form-group">
                <label for="password">Senha</label>
                <input type="password" id="password" name="password" placeholder="Sua Senha" required>
            </div>
            <button type="submit" class="btn">Login</button>
        </form>
        <div class="links">
            <a href="#">esqueceu a senha?</a> | <a href="#">Cadastre-se</a>
        </div>
    </div>
</body>

</html>

Explicação:

  1. A div com a classe login-container agrupa todo o conteúdo da tela.
  2. O form contém os campos de entrada para email e senha, e um botão de login.
  3. Os links para recuperação de senha e cadastro estão posicionados abaixo do formulário.

Estilo com CSS

O CSS cria o visual responsivo e moderno. Aqui está o estilo que aplicaremos:

 body {
     margin: 0;
     font-family: Arial, sans-serif;
     background-color: #f4f4f9;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
 }

 .login-container {
     width: 100%;
     max-width: 360px;
     background: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     text-align: center;
 }

 .login-container img {
     width: 80px;
     margin-bottom: 20px;
 }

 .login-container h1 {
     font-size: 1.5rem;
     margin-bottom: 20px;
     color: #333;
 }

 .form-group {
     margin-bottom: 15px;
     text-align: left;
 }

 .form-group label {
     display: block;
     font-size: 0.9rem;
     margin-bottom: 5px;
     color: #555;
 }

 .form-group input {
     width: 100%;
     padding: 10px;
     font-size: 1rem;
     border: 1px solid #ddd;
     border-radius: 4px;
     outline: none;
     box-sizing: border-box;
 }

 .form-group input:focus {
     border-color: #007bff;
 }

 .btn {
     width: 100%;
     padding: 10px;
     font-size: 1rem;
     background-color: #007bff;
     color: #fff;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 .btn:hover {
     background-color: #0056b3;
 }

 .links {
     margin-top: 15px;
 }

 .links a {
     font-size: 0.9rem;
     color: #007bff;
     text-decoration: none;
 }

 .links a:hover {
     text-decoration: underline;
 }

 @media (max-width: 480px) {
     .login-container {
         padding: 15px;
     }

     .login-container h1 {
         font-size: 1.2rem;
     }
 }

Passo a Passo para Testar

  1. Crie os arquivos:
    • Crie uma pasta chamada minha tela de login
    • Salve o HTML como index.html
    • Adicione o CSS diretamente no <style> ou em um arquivo separado chamado style.css.
  2. Visualize no navegador:
    • Abra o arquivo index.html no navegador para ver a tela de login.
  3. Teste a responsividade:
    • Reduza o tamanho da janela do navegador ou use as ferramentas de desenvolvedor (F12) para simular dispositivos móveis.

Melhorias Futuras

  • Validação JavaScript: Adicione validações para os campos de email e senha antes de enviar o formulário.
  • Back-end: Conecte esta tela ao seu servidor para autenticação real.
  • Estilo personalizado: Substitua o logo de exemplo pelo logo do seu projeto.

Me deixe saber sua opinião sobre este tópico

0 Comentários

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Ainda não há comentários. Seja o primeiro a compartilhar seus pensamentos!