WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Formulaire de connexion LED
1484
Andev.web
Ouvrir dans l'éditeur
Video
Publiez votre code
0
Recommandé
19 January 2024
Bouton de changement de thème
19 October 2024
Site Web de portfolio de développeur HTML
23 November 2025
Animation de carte de crédit réalisée avec Paystack
HTML
Copy
Andev Web
Login
Username
Password
Forgot Password
Sign up
CSS
Copy
@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; }
JS
Copy
let boxes = document.querySelectorAll('.box'); boxes.forEach(box => { box.onmousemove = function(e){ let x = e.pageX - box.offsetLeft; let y = e.pageY - box.offsetTop; box.style.setProperty('--x', x + 'px'); box.style.setProperty('--y', y + 'px'); } });