WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Formulaire de connexion/inscription
16,466
webleb
Ouvrir dans l'éditeur
Publiez votre code
5
Recommandé
24 November 2025
Code source HTML5 du jeu aléatoire de panier
15 June 2025
Un code par securearray494
15 October 2024
Bouton Mode sombre et Mode nuit
HTML
Copy
Webleb
Sign Up
Log In
Register
Sign Up
Welcome Back!
Forgot Password?
Login
CSS
Copy
@import url(https://fonts.googleapis.com/css?family=Poppins:300); *, *:before, *:after { box-sizing: border-box; } body { height: 100vh; background: #01939c; overflow-y: hidden!important; font-family: 'Poppins', sans-serif; } a { text-decoration: none; color: #01939c; transition: 0.5s ease; } a:hover { color: #179b77; } .form { background: #12141d; padding: 40px; max-width: 600px; margin: 40px auto; border-radius: 15px; box-shadow: 0 4px 10px 4px rgba(19, 35, 47, .3); } .tab-group { list-style: none; padding: 0; margin: 0 0 40px 0; } .tab-group:after { content: ""; display: table; clear: both; } .tab-group li a { display: block; text-decoration: none; padding: 15px; background: rgba(160, 179, 176, .25); color: #a0b3b0; font-size: 20px; float: left; width: 48%; text-align: center; cursor: pointer; transition: 0.5s ease; } .tab-group li a:hover { background: #01939c; color: #fff; } .tab-group .active a { background: #01939c; color: #fff; } .tab-content > div:last-child { display: none; } .tab-group{ border-radius: 15px!important; margin: 20px; } h1 { text-align: center; color: #fff; font-weight: 300; margin: 0 0 40px; } input, textarea { font-size: 17px; display: block; width: 100%; height: 100%; padding: 5px 10px; background: none; background-image: none; border: 1px solid #01939c; color: #fff; border-radius: 6px; transition: border-color 0.25s ease, box-shadow 0.25s ease; } textarea { border: 2px solid #01939c; resize: vertical; } .field-wrap { position: relative; margin-bottom: 40px; } .top-row:after { content: ""; display: table; clear: both; } .top-row > div { float: left; width: 48%; margin-right: 4%; } .top-row > div:last-child { margin: 0; } .button { border: 0; outline: none; border-radius: 15px; padding: 15px 0; font-size: 20px; font-weight: 400; letter-spacing: 0.1em; background: #01939c; cursor: pointer; color: #fff; transition: all 0.5s ease; -webkit-appearance: none; } .button:hover, .button:focus { background: #025c61; } .button-block { display: block; width: 100%; } .forgot { margin-top: -20px; text-align: right; }
JS
Copy
$('.form').find('input, textarea').on('keyup blur focus', function (e) { var $this = $(this), label = $this.prev('label'); if (e.type === 'keyup') { if ($this.val() === '') { label.removeClass('active highlight'); } else { label.addClass('active highlight'); } } else if (e.type === 'blur') { if( $this.val() === '' ) { label.removeClass('active highlight'); } else { label.removeClass('highlight'); } } else if (e.type === 'focus') { if( $this.val() === '' ) { label.removeClass('highlight'); } else if( $this.val() !== '' ) { label.addClass('highlight'); } } }); $('.tab a').on('click', function (e) { e.preventDefault(); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); target = $(this).attr('href'); $('.tab-content > div').not(target).hide(); $(target).fadeIn(600); });