Page de connexion Roblox HTML CSS

1789 codex

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

13 January 2026

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

21 August 2025

Formulaire de connexion et d'inscription (HTML, CSS, JS)

24 February 2024

Boîte de couleur

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

Recommandé

Chargeur de canevas de jeu HTML5 et de moteur JavaScript

Formulaire de connexion et d'inscription (HTML, CSS, JS)

Boîte de couleur

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS