Formulario de inicio de sesión turco HTML

1,163 mohkerrouche9

Abrir en el editor Publica tu código

Formulario de inicio de sesión turco HTML

Recomendado

28 June 2025

Un código de Mete

17 December 2025

Clon del juego Geometry Dash HTML CSS JavaScript

4 August 2025

Cambio de realidad simulada

HTML

CSS

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1f1c2c, #928dab);
  font-family: 'Segoe UI', sans-serif;
}

.container {
  perspective: 1000px;
}

.form-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  width: 320px;
  padding: 30px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.form-box:hover {
  transform: rotateY(10deg) rotateX(10deg) scale(1.03);
}

h2 {
  text-align: center;
  color: white;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

label {
  color: #eee;
  margin-bottom: 5px;
}

input {
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background 0.3s ease;
}

input:focus {
  background: rgba(255, 255, 255, 0.4);
}

button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #00bcd4;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #0097a7;
}