El registro del DOC

841 TheDoc

Abrir en el editor Video Publica tu código

Recomendado

21 May 2025

libro electrónico

18 December 2025

Código fuente HTML5 del juego Bloodmoney

19 November 2025

Código HTML para el inicio de sesión de Google y el menú adaptable

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>The DOC Sign Up</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="Sign up for The DOC – your secure document and collaboration platform." />
  <meta name="keywords" content="sign up, register, The DOC, document, collaboration, secure, cloud, user, authentication, web app" />
  <link href="style.css" rel="stylesheet" />
</head>
<body>
<!-- 
  Webleb Logo Color Palette (dark to light):

1. #232526   (dark anthracite)
  2. #ff6a00   (dark orange)
  3. #ff9100   (vivid orange)
  4. #ffd580   (light cream orange)
-->
<div class="vid-container">
  <video id="Video1" class="bgvid back" autoplay muted loop playsinline>
      <source src="/vids/Sunset-on-the-seashore-1428970.mp4" type="video/mp4"> 
  </video>
  <div class="overlay"></div>
  <div class="inner-container">
    <div class="box">
      <h1 style="text-align:center;margin-bottom:24px;color:#fff;">Sign Up</h1>
      <input type="text" placeholder="Username" autocomplete="username"/>
      <input type="text" placeholder="Email" autocomplete="email"/>
      <input type="password" placeholder="Password" autocomplete="new-password"/>
      <input type="password" placeholder="Confirm Password" autocomplete="new-password"/>
      <button>Sign Up</button>
      <p>Already have an account? <span class="signup">Login</span></p>
    </div>
  </div>
</div>
<script src="/js/main.js"></script>
</body>
</html>
</div>
<script src="/js/main.js"></script>
</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Inter:300);
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  box-sizing: border-box;
  min-height: 100vh;
}

.vid-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bgvid {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(120deg, rgba(30,30,40,0.7) 60%, rgba(255,145,0,0.2) 100%);
  z-index: 2;
}

.inner-container {
  position: relative;
  z-index: 3;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  background: rgba(23, 23, 26, 0.82);
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 #000a, 0 1.5px 8px 0 #ff910055;
  padding: 38px 32px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 320px;
  max-width: 90vw;
  backdrop-filter: blur(8px);
  border: 1.5px solid #ff9100;
}

.logo {
  font-size: 2.1rem;
  font-weight: bold;
  color: #ff9100;
  margin-bottom: 10px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo span {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.box h1 {
  color: #fff;
  margin-bottom: 22px;
  font-size: 1.5rem;
  letter-spacing: 1px;
}

.box input[type="text"], .box input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: none;
  border-radius: 8px;
  background: #232526;
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition: box-shadow 0.2s, border 0.2s;
  box-shadow: 0 1px 4px #0002;
  border: 1.5px solid #444;
}
.box input[type="text"]:focus, .box input[type="password"]:focus {
  border: 1.5px solid #ff9100;
  box-shadow: 0 0 0 2px #ff910055;
}

.box button {
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(90deg, #ff9100 60%, #ffb347 100%);
  color: #232526;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px #ff910033;
  letter-spacing: 0.5px;
}
.box button:hover {
  background: linear-gradient(90deg, #ffb347 0%, #ff9100 100%);
  color: #fff;
}

.box p {
  color: #fff;
  font-size: 1rem;
  margin: 0;
}
.signup {
  color: #ff9100;
  cursor: pointer;
  font-weight: 600;
  margin-left: 4px;
  transition: text-decoration 0.2s;
}
.signup:hover {
  text-decoration: underline;
}

.input-group {
  position: relative;
  width: 100%;
  margin-bottom: 18px;
}
.input-group input[type="text"]#username {
  width: 100%;
  padding: 14px 12px 8px 12px;
  border: none;
  border-bottom: 2px solid #444;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s;
  z-index: 1;
  position: relative;
}
.input-group label {
  position: absolute;
  left: 12px;
  top: 14px;
  color: #aaa;
  font-size: 1rem;
  pointer-events: none;
  transition: 
    color 0.2s,
    font-size 0.2s,
    transform 0.3s cubic-bezier(.4,2,.6,1),
    top 0.2s;
  background: transparent;
  z-index: 2;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown):not(:focus) + label,
.input-group input:not(:focus):valid + label {
  color: #ff9100;
  font-size: 0.85rem;
  top: -12px;
  transform: translateY(-8px) scale(0.95);
  background: #232526;
  padding: 0 4px;
}

.input-group .underline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #ff9100;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(.4,2,.6,1);
  z-index: 1;
}
.input-group input:focus ~ .underline {
  transform: scaleX(1);
}
.input-group input:not(:placeholder-shown):not(:focus) ~ .underline,
.input-group input:valid ~ .underline {
  transform: scaleX(1);
}

@media (max-width: 600px) {
  .box {
    min-width: 90vw;
    padding: 24px 8vw 18px 8vw;
  }
  .logo {
    font-size: 1.5rem;
  }
  .box h1 {
    font-size: 1.1rem;
  }
}

Recomendado

libro electrónico

Código fuente HTML5 del juego Bloodmoney

Código HTML para el inicio de sesión de Google y el menú adaptable

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS