Formulario de inicio de sesión LED

1,999 0 Andev.web Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

14 May 2025

Formulario de inicio de sesión de degradado HTML CSS

13 October 2026

Cargador de scripts ofuscados con HTML y JavaScript – Versión 2

20 August 2024

Página de inicio de sesión de Facebook

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Andev Web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
    <div class="box" style="--clr: #f00;"></div>
    <div class="box" style="--clr: #f0f;"></div>
    <div class="box" style="--clr: #0ff;"></div>
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
    <div class="box" style="--clr: #f00;"></div>
    <div class="box" style="--clr: #f0f;"></div>
    <div class="box" style="--clr: #0ff;"></div>
    <div class="box" style="--clr: #0f0;"></div>
    <div class="box" style="--clr: #ff0;"></div>
  </div>

<div class="login">
    <h2>Login</h2>
    <div class="inputBox">
      <input type="text" required>
      <span>Username</span>
    </div>
    <div class="inputBox">
      <input type="password" required>
      <span>Password</span>
    </div>
    <div class="inputBox">
      <input type="submit" value="Sign in">
    </div>
    <div class="group">
    <a href="#">Forgot Password</a>
    <a href="#">Sign up</a>
    </div>
  </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
  font-family: 'Poppins', sans-serif;
}
.container{
  display: grid;
  grid-template-columns: repeat(3,150px);
  grid-gap: 4px;
}
/*Andev Web*/
.container .box{
  position: relative;
  width: 150px;
  height: 150px;
  background: rgba(45, 45, 45, 1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box::before{
  content: '';
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  background: radial-gradient(var(--clr), transparent, transparent);
  width: 300px;
  height: 300px;
  transition: 0.5s, top 0.1s,left 0.1s;
}
.container .box::after{
  content: '';
  position: absolute;
  inset: 2px;
  background: rgba(45, 45, 45, 0.9);
}
.login{
  position: absolute;
  width: 450px;
  height: 600px;
  padding: 60px 40px;
  text-align: center;
  pointer-events: none;
}
.login h2{
  color: #fff;
  font-size: 2em;
  margin-bottom: 60px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: all;
}
.login .inputBox{
  position: relative;
  width: 100%;
  margin-top: 30px;
}
.login .inputBox input{
  width: 100%;
  padding: 20px 25px;
  outline: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: rgba(255, 255, 255, 0.25);
  border: 1px solid #000;
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: all;
}
.login .inputBox span{
  position: absolute;
  left: 0;
  padding: 20px 25px;
  font-size: 1em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  transition: 0.25s;
  pointer-events: none;
}
.login .inputBox input:focus ~ span,
.login .inputBox input:valid ~ span{
  transform: translate(15px, -10px);
  font-size: 0.75em;
  background: #fff;
  color: #222;
  padding: 2px 5px;
  border: 1px solid #000;
}
.login .inputBox input[type="submit"]{
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 500;
  transition: 0.25s;
}
.login .inputBox input[type="submit"]:hover{
  background: #0f0;
  color: #222;
  border: 1px solid transparent;
}
.group{
  position: relative;
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.group a{
  color: #222;
  background: #fff;
  padding: 2px 5px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.05em;
  border-radius: 4px;
  pointer-events: all;
}
.group a:nth-child(2){
  background: #f0f;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 0 15px #f0f, 0 0 30px #f0f, 0 0 60px #f0f;
}

Comments 0

…