Modelo de página de login HTML

868 alejandrokundrah

Abrir no Editor Publique Seu Código

Recomendado

12 July 2025

Efeito de brilho do cartão CSS

13 June 2025

carregamento de torradas de ovos

23 August 2025

Modelo HTML para loja de comércio eletrônico Tailwind CSS

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  width: 350px;
  padding: 40px;
  background-color: #f0f0f0;
  border-radius: 20px;
  box-shadow: 
    10px 10px 20px rgba(0, 0, 0, 0.1),
    -10px -10px 20px rgba(255, 255, 255, 0.9);
}

.login-box h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.input-group {
  position: relative;
  margin-bottom: 25px;
}

.input-group input {
  width: 100%;
  padding: 15px;
  border: none;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9);
  outline: none;
  color: #333;
}

.input-group input::placeholder {
  color: #999;
}

button {
  width: 100%;
  padding: 15px;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 
    5px 5px 10px rgba(0, 0, 0, 0.1),
    -5px -5px 10px rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

button:hover {
  background-color: #45a049;
}

button:active {
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9);
}

.links {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.links a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

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

Recomendado

Efeito de brilho do cartão CSS

carregamento de torradas de ovos

Modelo HTML para loja de comércio eletrônico Tailwind CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS