WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Página de login do Roblox HTML CSS
835
codex
Abrir no Editor
Publique Seu Código
Recomendado
19 March 2025
Caixas de seleção de sabre de luz Star Wars em CSS3 puro
27 June 2025
código de dança
31 July 2025
Modelo HTML de página de login do Liquid Drop
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) */