WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par anhtuanle2004thl
1369
anhtuanle2004thl
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
1 June 2025
Un code par kevekıbhack
28 December 2024
un système créé avec des répertoires
15 August 2025
Code HTML pour tablette graphique avec Javascript
HTML
Copy
Slide Navbar
Sign up
Sign up
Login
Login
CSS
Copy
body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Jost', sans-serif; background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e); } .main{ width: 350px; height: 500px; background: red; overflow: hidden; background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover; border-radius: 10px; box-shadow: 5px 20px 50px #000; } #chk{ display: none; } .signup{ position: relative; width:100%; height: 100%; } label{ color: #fff; font-size: 2.3em; justify-content: center; display: flex; margin: 50px; font-weight: bold; cursor: pointer; transition: .5s ease-in-out; } input{ width: 60%; height: 10px; background: #e0dede; justify-content: center; display: flex; margin: 20px auto; padding: 12px; border: none; outline: none; border-radius: 5px; } button{ width: 60%; height: 40px; margin: 10px auto; justify-content: center; display: block; color: #fff; background: #573b8a; font-size: 1em; font-weight: bold; margin-top: 30px; outline: none; border: none; border-radius: 5px; transition: .2s ease-in; cursor: pointer; } button:hover{ background: #6d44b8; } .login{ height: 460px; background: #eee; border-radius: 60% / 10%; transform: translateY(-180px); transition: .8s ease-in-out; } .login label{ color: #573b8a; transform: scale(.6); } #chk:checked ~ .login{ transform: translateY(-500px); } #chk:checked ~ .login label{ transform: scale(1); } #chk:checked ~ .signup label{ transform: scale(.6); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */