Anmeldung von TheDOC

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

9 December 2024

Ein Code von efficientlogic648

30 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <title>The DOC Login</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="Login to The DOC – your secure document and collaboration platform." />
  <meta name="keywords" content="login, 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;">Login</h1>
      <input type="text" placeholder="The Doc" autocomplete="username"/>
      <input type="password" placeholder="Password" autocomplete="current-password"/>
      <button>Login</button>
      <p>Not a member? <span class="signup">Sign Up</span></p>
    </div>
  </div>
</div>
<script src="/js/main.js"></script>
</body>
</html>
</html>
</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;
}

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

Anmeldung von TheDOC

Empfohlen

Ein Code von slowlogic992

Ein Code von efficientlogic648

Ein Code von Metr

HTML

CSS

JS

Empfohlen

Ein Code von slowlogic992

Ein Code von efficientlogic648

Ein Code von Metr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS