HTML Login Page Template

1061 alejandrokundrah

Open In Editor Video Publish Your Code

HTML Login Page Template

Recommended

23 July 2024

Login with registration

18 December 2025

Elastic Face Game HTML Code

22 October 2023

Loading page

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;
}

JS