Loguin

Open In Editor Publish Your Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  
    <title>login Form </title>
 
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    
    
</head>
<body>
    <div class="background">
        <div class="shape"></div>
        <div class="shape"></div>
    </div>
    <form>
        <h3>Inicio de seccion</h3>

<label for="username">Nombre de usuario</label>
        <input type="text" placeholder="Email o Celurar" id="username">

<label for="password">Password</label>
        <input type="password" placeholder="Password" id="password">

<button id="boton">Iniciar seccion </button>
        <div class="social">
          <div class="go"><i class="fab fa-google"></i>Google</div>
          <div class="fb"><i class="fab fa-facebook"></i>Facebook</div>
        </div>
    </form>
</body>
</html>

CSS

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #000000;
}
.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 200px;
    width: 200px;
    position: absolute;
    border-radius: 50%;
}
.shape:first-child{
    background: linear-gradient(
        #0c9ddb,
        #884343
    );
    left: -80px;
    top: -80px;
}
.shape:last-child{
    background: linear-gradient(
        to right,
        #a54f71,
        #f4a30d
    );
    right: -30px;
    bottom: -80px;
}
form{
    height: 520px;
    width: 400px;
    background-color: rgba(255,255,255,0.13);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    padding: 50px 35px;
}
form *{
    font-family: 'Poppins',sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}
form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}

label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 500;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}
::placeholder{
    color: #e5e5e5;
}
button{
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}
.social{
  margin-top: 30px;
  display: flex;
}
.social div{
  background: red;
  width: 150px;
  border-radius: 3px;
  padding: 5px 10px 10px 5px;
  background-color: rgba(255,255,255,0.27);
  color: #eaf0fb;
  text-align: center;
}
.social div:hover{
  background-color: rgba(255,255,255,0.47);
}
.social .fb{
  margin-left: 25px;
}
.social i{
  margin-right: 4px;
}

#boton{
  background: #3b58983c;
  transition: 0.5s;
  color: rgb(225, 235, 225);
}

JS

const gear1 = document.getElementById("gear1");
const gear2 = document.getElementById("gear2");
const gear3 = document.getElementById("gear3");

document.getElementById("username").addEventListener("focus", () => {
  gear1.style.transform = "rotate(360deg)";
});

document.getElementById("password").addEventListener("input", () => {
  gear2.style.transform = `rotate(${Math.random() * 360}deg)`;
});

document.getElementById("loginBtn").addEventListener("mouseover", () => {
  gear3.style.transform = "rotate(-360deg)";
});

document.getElementById("loginBtn").addEventListener("click", () => {
  const user = document.getElementById("username").value;
  const pass = document.getElementById("password").value;
  const error = document.getElementById("errorMsg");

if (user === "admin" && pass === "1234") {
    gear1.style.transform = "rotate(720deg)";
    gear2.style.transform = "rotate(-720deg)";
    gear3.style.transform = "rotate(1080deg)";
    setTimeout(() => {
      alert("¡Bienvenido al sistema, mecánico!");
    }, 800);
  } else {
    error.textContent = "Usuario o contraseña incorrectos.";
  }
});

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS