WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Page de connexion Roblox HTML CSS
1122
codex
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
26 August 2025
Modèle HTML de site Web de film
18 October 2025
Modèle HTML de base avec bouton (espagnol)
3 July 2025
Un code de Mete
HTML
Copy
Log In
Sign up
·
Use another device
·
Need help?
CSS
Copy
:root { --font-color: 255 255 255; --highlight-color: 0 0 0; --theme-background: 20 20 20; --theme-light: 0 0 0; --theme-medium: 0 0 0; --theme-dark: 0 0 0; } body { background-color: black; margin: 0px; } body::-webkit-scrollbar { width: 4px; } body::-webkit-scrollbar-track { background-color: rgb(var(--theme-background)); } body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } * { box-sizing: border-box; } h1, h2, h3, h4, input, select, button, span, a, p { color: rgb(var(--font-color)); font-family: "Noto Sans", sans-serif; font-size: 1rem; font-weight: 400; margin: 0px; } button, a, input { outline: none; } .highlight { color: rgb(var(--highlight-color)); } .fancy-scrollbar::-webkit-scrollbar { height: 4px; width: 4px; } .fancy-scrollbar::-webkit-scrollbar-track { background-color: transparent; } .fancy-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } .no-scrollbar::-webkit-scrollbar { height: 0px; width: 0px; } #phone { background-color: rgb(var(--theme-background)); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; height: 851px; width: 393px; margin: 100px auto; position: relative; overflow: hidden; } #main-wrapper { height: 100%; overflow: auto; } #main { height: 100%; } #login-screen { height: 100%; position: relative; overflow: hidden; } #nav { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; margin: 1.75rem; margin-bottom: 0rem; } #nav > :is(.nav-logo, .nav-search) { height: 2.4rem; width: 2.4rem; display: flex; align-items: center; justify-content: center; text-align: center; outline: none; cursor: pointer; } #nav > .nav-logo { position: relative; text-decoration: none; } #nav > .nav-logo > i { font-size: 1.5rem; transform: rotate(10deg); } #nav > .nav-logo > i.inset { position: absolute; color: black; scale: 0.35; } #nav > .nav-search { background-color: transparent; padding: 0rem; border: none; } #nav > .nav-search:is(:hover, :focus) { background-color: rgb(255 255 255 / 10%); border-radius: 0.25rem; } #nav > .nav-search > i { font-size: 1.25rem; } #login-form-wrapper { display: flex; flex-direction: column; gap: 2rem; position: relative; z-index: 4; margin: 1.75rem; margin-top: 3rem; } #login-form-wrapper > img { width: 14rem; align-self: center; } #login-form { display: flex; flex-direction: column; flex-grow: 1; gap: 0.5rem; flex-basis: 100%; } #login-form > input { background-color: transparent; padding: 0.75rem; background-color: rgb(var(--theme-background) / 40%); backdrop-filter: blur(3px); border: 1px solid rgb(255 255 255 / 20%); border-radius: 0.4rem; outline: none; transition: border-color 250ms ease; } #login-form > input:focus { border-color: rgb(255 255 255 / 50%); } #login-form > button { background-color: white; border: none; border-radius: 0.4rem; color: black; padding: 0.75rem; cursor: pointer; } #login-form > .sign-up-button { background-color: rgb(50 50 50); border: none; color: white; } #login-form > .sign-up-button:is(:hover, :focus) { background-color: rgb(50 50 50); } #login-form > .alternate-options { display: flex; justify-content: center; gap: 1rem; } #login-form > .alternate-options > :is(a, span) { font-size: 0.8rem; color: rgb(255 255 255 / 70%); text-decoration: none; } #login-form > .alternate-options > a:is(:hover, :focus) { text-decoration: underline; } #footer { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; } #footer-sections { display: flex; gap: 1rem; } #footer-sections > .footer-section { flex-grow: 1; } #footer-sections > .footer-section > .label { font-size: 0.9rem; font-weight: 700; } #footer-sections > .footer-section > .footer-section-items { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } #footer-sections > .footer-section > .footer-section-items > a { padding: 0.25rem 0rem; color: rgb(255 255 255 / 0.7); font-size: 0.8rem; text-decoration: none; } #footer-sections > .footer-section > .footer-section-items > a:is(:hover, :focus) { text-decoration: underline; } #copyright > p { color: rgb(255 255 255 / 0.7); font-size: 0.65rem; } #copyright > p b { color: rgb(255 255 255 / 0.9); } #background-grid { object-position: center; object-fit: cover; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; opacity: 0.08; } #background-man { height: 30rem; position: absolute; right: 0rem; bottom: 0rem; z-index: 3; rotate: -15deg; translate: 20% 25%; } #border { width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); position: absolute; left: 0.75rem; top: 0.75rem; z-index: 2; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='12%2c 28' stroke-dashoffset='6' stroke-linecap='square'/%3e%3c/svg%3e"); } @media(max-width: 500px) { body { overflow: auto; } #phone { height: 100vh; display: flex; width: 100%; margin: 0px auto; } #main-wrapper { width: 100%; flex-grow: 1; } } @media(max-height: 720px) { #background-man { height: 24rem; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */