Página de inicio de sesión de Roblox HTML CSS

838 codex

Abrir en el editor Publica tu código

Página de inicio de sesión de Roblox HTML CSS

Recomendado

30 March 2025

Un código de ytr3d3

24 July 2025

Código HTML del interruptor de palanca CSS

24 July 2025

Fragmento de animación de carga de CSS

HTML

<div id="phone">
  <div id="main-wrapper" class="fancy-scrollbar">
    <div id="main">
      <div id="login-screen">
        <div id="nav">
          <a class="nav-logo" href="#">
            <i class="fa-sharp fa-solid fa-square"></i>
            <i class="inset fa-sharp fa-solid fa-square"></i>
          </a>
          <button class="nav-search" type="button">
            <i class="fa-solid fa-magnifying-glass"></i>
          </button>
        </div>
        <div id="login-form-wrapper">
          <img src="https://assets.codepen.io/1468070/Roblox+Logo.svg" alt="" />
          <div id="login-form">
            <input class="dashed" type="text" placeholder="Username/Email/Phone" />
            <input class="dashed" type="password" placeholder="Password" />
            <button class="login-button" type="button">Log In</button>
            <div class="alternate-options">
              <a href="#" class="sign-up-button" type="button">Sign up</a>
              <span class="dot">·</span>
              <a href="#" class="another-device-button" type="button">Use another device</a>
              <span class="dot">·</span>
              <a href="#" class="need-help-button" type="button">Need help?</a>
            </div>
          </div>
        </div>
        <img id="background-grid" src="https://assets.codepen.io/1468070/Roblox+Background.jpg" />
        <img id="background-man" src="https://assets.codepen.io/1468070/Lego+Man.webp" alt="" />
        <div id="border"></div>
      </div>
      <div id="footer">
        <div id="footer-sections">
          <div class="footer-section">
            <h3 class="label">About</h3>
            <div class="footer-section-items">
              <a href="#">About Us</a>
              <a href="#">Blog</a>
              <a href="#">Jobs</a>
            </div>
          </div>
          <div class="footer-section">
            <h3 class="label">Stuff</h3>
            <div class="footer-section-items">
              <a href="#">Accessibility</a>
              <a href="#">Parents</a>
              <a href="#">Gift Cards</a>
            </div>
          </div>
          <div class="footer-section">
            <h3 class="label">Legal</h3>
            <div class="footer-section-items">
              <a href="#">Privacy</a>
              <a href="#">Terms</a>
            </div>
          </div>
        </div>
        <div id="copyright">
          <p><b>©2023 Roblox Corporation.</b> Roblox, the Roblox logo and Powering Imagination are among our registered and unregistered trademarks in the U.S. and other countries.</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

: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; 
  }
}

Recomendado

Un código de ytr3d3

Código HTML del interruptor de palanca CSS

Fragmento de animación de carga de CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS