HTML CSS Login Form Code

Open In Editor Publish Your Code

HTML CSS Login Form Code

Recommended

13 October 2024

form by

23 August 2024

lecteur mp3 en html css et js

10 August 2024

HTML Login Form Code

HTML

CSS

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #333;
}

.login-container {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-box {
  text-align: center;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: #333;
}

.input-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input:focus {
  border-color: #6a11cb;
  outline: none;
}

button {
  width: 100%;
  padding: 0.75rem;
  background: #6a11cb;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #2575fc;
}

.extra-links {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}

.extra-links a {
  color: #6a11cb;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.extra-links a:hover {
  color: #2575fc;
}

JS