Entendido! Vou deixar o código mais elegante e estilizado para você.
Vamos adicionar mais
detalhes visuais, como bordas suaves, sombras, transições e alguns efeitos para tornar o design
mais moderno e atraente. Vou também garantir que a página seja responsiva para que ela se ajuste
bem a diferentes tamanhos de tela.
Aqui está uma versão mais estilizada do seu formulário de login:
HTML (Página de Login)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página de Login</title>
<link rel="stylesheet" href="[Link]"> <!-- link para o arquivo CSS -->
</head>
<body>
<div class="login-container">
<h2>Entrar</h2>
<form action="#" method="POST">
<div class="input-group">
<label for="username">Usuário</label>
<input type="text" id="username" name="username"
placeholder="Digite seu usuário" required>
</div>
<div class="input-group">
<label for="password">Senha</label>
<input type="password" id="password" name="password"
placeholder="Digite sua senha" required>
</div>
<button type="submit" class="btn">Entrar</button>
<div class="signup-link">
<p>Não tem uma conta? <a href="#">Cadastre-se</a></p>
</div>
</form>
</div>
</body>
</html>
CSS (Estilo para a Página de Login)
/* Resetando algumas configurações básicas */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Estilo geral para o body */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradiente de
fundo bonito */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
/* Container do formulário de login */
.login-container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px; /* Max largura para não ficar muito largo */
text-align: center;
}
/* Título do formulário */
h2 {
margin-bottom: 20px;
font-size: 28px;
font-weight: 600;
color: #333;
text-transform: uppercase;
}
/* Estilo para os grupos de input */
.input-group {
margin-bottom: 20px;
text-align: left;
}
/* Estilo para o label */
.input-group label {
display: block;
font-size: 14px;
color: #333;
margin-bottom: 5px;
}
/* Estilo para os campos de input */
.input-group input {
width: 100%;
padding: 12px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 16px;
color: #333;
transition: border-color 0.3s ease;
}
/* Efeito no campo de input quando o usuário está digitando */
.input-group input:focus {
border-color: #ff7e5f;
outline: none;
}
/* Estilo para o botão de login */
.btn {
width: 100%;
padding: 14px;
background-color: #ff7e5f;
border: none;
border-radius: 6px;
color: #fff;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Efeito ao passar o mouse no botão */
.btn:hover {
background-color: #feb47b;
transform: translateY(-3px); /* Leve efeito de "subir" no botão */
}
/* Link para o cadastro */
.signup-link {
margin-top: 15px;
font-size: 14px;
color: #555;
}
.signup-link a {
color: #ff7e5f;
text-decoration: none;
font-weight: 600;
}
.signup-link a:hover {
text-decoration: underline;
}
Alterações Feitas para Melhorar o Design:
1. Gradiente de Fundo: A cor de fundo da página agora usa um gradiente de cores quentes
(laranja e rosa), o que dá um efeito visual mais interessante.
background: linear-gradient(to right, #ff7e5f, #feb47b);
2. Centro da Página: O formulário de login foi centralizado tanto horizontalmente quanto
verticalmente usando flexbox. O height: 100vh garante que o formulário ocupe a tela
toda.
3. Login Container: O formulário agora tem um fundo branco, bordas arredondadas,
sombra suave e padding para que o conteúdo fique mais espaçoso e agradável. A largura
máxima é de 400px para evitar que o formulário fique largo demais em telas grandes.
4. Botão de Login: O botão tem uma cor de fundo laranja, com um efeito de transição suave
para um tom mais claro quando o mouse passa por cima (hover). Também foi adicionado
um pequeno efeito de "elevação" no botão ao passar o mouse (transform:
translateY(-3px)).
5. Campos de Entrada: Os campos de entrada possuem bordas arredondadas e um efeito de
transição na cor da borda quando o usuário começa a digitar. Eles ficam com uma borda
laranja para indicar que o campo está em foco.
6. Texto e Links: O link de "cadastre-se" está em uma cor de laranja, que combina com o
botão, e tem um efeito de sublinhado quando o mouse passa por cima.
7. Responsividade: A página é responsiva, ou seja, o formulário ficará centralizado em
qualquer tamanho de tela. O max-width: 400px ajuda a garantir que o formulário não
fique excessivamente grande em telas muito largas.
Visual Final
Com esse código, o design da página de login fica muito mais moderno e elegante, com cores
atraentes e efeitos de interação agradáveis. Isso ajuda a criar uma experiência mais agradável para o
usuário, sem perder a simplicidade e a funcionalidade.
Você pode ajustar as cores e o estilo conforme seu gosto, mas essa base já te dá um bom ponto de
partida para uma interface de login mais bonita.
Se quiser fazer mais ajustes ou tiver alguma dúvida, só me avisar! 😄
Você disse:
Não podes unificar o css e o codigo html na mesma página?
O ChatGPT disse:
Claro! Eu posso unificar o CSS e o HTML em uma única página. Para isso, vamos colocar o
código CSS diretamente dentro da tag <style> no próprio arquivo HTML, ao invés de usar um
arquivo CSS externo.
Aqui está a versão unificada do seu código de página de login:
Código HTML com CSS Embutido:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página de Login</title>
<style>
/* Resetando algumas configurações básicas */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Estilo geral para o body */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #ff7e5f, #feb47b); /*
Gradiente de fundo bonito */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
/* Container do formulário de login */
.login-container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px; /* Max largura para não ficar muito largo */
text-align: center;
}
/* Título do formulário */
h2 {
margin-bottom: 20px;
font-size: 28px;
font-weight: 600;
color: #333;
text-transform: uppercase;
}
/* Estilo para os grupos de input */
.input-group {
margin-bottom: 20px;
text-align: left;
}
/* Estilo para o label */
.input-group label {
display: block;
font-size: 14px;
color: #333;
margin-bottom: 5px;
}
/* Estilo para os campos de input */
.input-group input {
width: 100%;
padding: 12px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 16px;
color: #333;
transition: border-color 0.3s ease;
}
/* Efeito no campo de input quando o usuário está digitando */
.input-group input:focus {
border-color: #ff7e5f;
outline: none;
}
/* Estilo para o botão de login */
.btn {
width: 100%;
padding: 14px;
background-color: #ff7e5f;
border: none;
border-radius: 6px;
color: #fff;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Efeito ao passar o mouse no botão */
.btn:hover {
background-color: #feb47b;
transform: translateY(-3px); /* Leve efeito de "subir" no botão */
}
/* Link para o cadastro */
.signup-link {
margin-top: 15px;
font-size: 14px;
color: #555;
}
.signup-link a {
color: #ff7e5f;
text-decoration: none;
font-weight: 600;
}
.signup-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Entrar</h2>
<form action="#" method="POST">
<div class="input-group">
<label for="username">Usuário</label>
<input type="text" id="username" name="username"
placeholder="Digite seu usuário" required>
</div>
<div class="input-group">
<label for="password">Senha</label>
<input type="password" id="password" name="password"
placeholder="Digite sua senha" required>
</div>
<button type="submit" class="btn">Entrar</button>
<div class="signup-link">
<p>Não tem uma conta? <a href="#">Cadastre-se</a></p>
</div>
</form>
</div>
</body>
</html>
O que mudou:
1. CSS embutido: Agora o CSS está dentro da tag <style> no <head>, o que significa que
o arquivo HTML tem todos os estilos necessários incorporados.
2. Formato e Estrutura: O restante do código HTML permanece o mesmo, mas agora você
pode copiar e colar diretamente este arquivo sem precisar de um arquivo CSS externo.
Como funciona:
• Visualização: Ao abrir o arquivo no navegador, o estilo e o layout serão aplicados
automaticamente ao conteúdo HTML.
• Praticidade: Ter o CSS embutido no próprio arquivo HTML torna o desenvolvimento mais
rápido, especialmente em páginas pequenas ou para testes rápidos.