Un código de dynamicarray606

Abrir en el editor Publica tu código

Recomendado

18 December 2024

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login page</title>
    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
    <div id="credits">Made by pan4o</div>
  </head>
  <body>
    <div class="container">
      <form action="">
        <h1>Login</h1>

<div class="remember-forgot">
          <label><input type="checkbox" /> Remember me</label>
          <a href="#">Forgot password?</a>
        </div>

<button type="submit" class="btn">Login</button>

<div class="register-link">
          <p>Don't have an account? <a href="#">Register here!</a></p>
        </div>
      </form>
    </div>
  </body>
</html>

CSS

* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url(https://c.wallhere.com/photos/da/70/digital_art_landscape_illustration_skyline-2285476.jpg!d) no-repeat;
  background-size: cover;
  background-position: center;
  #credits {position: fixed; bottom: 10px; right: 10px; color: rgb(255, 255, 255); font-size: 12px; font-family: Arial, sans-serif;}
}

.container {
  width: 420px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
  border-radius: 10px;
  padding: 30px 40px;
}

.container h1 {
  font-size: 36px;
  text-align: center;
}

.container .input-box {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 30px 0px;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid rgb(255, 255, 255, 0.2);
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  padding: 20px 45px 20px 20px;
}

.input-box input::placeholder {
  color: #fff;
}

.input-box i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}

.container .remember-forgot {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  margin: -15px 0px 15px;
}

.remember-forgot label input {
  color: #fff;
  margin-right: 3px;
}

.remember-forgot a {
  color: #fff;
  text-decoration: none;
}

.remember-forgot a:hover {
  text-decoration: underline;
}

.container .btn {
  width: 100%;
  height: 45px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 5px;
  box-decoration-break: 0px 0px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.container .register-link {
  font-size: 14.5px;
  text-align: center;
  margin: 20px 0px 15px;
}

.register-link p a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.register-link p a:hover {
  text-decoration: underline;
}

Un código de dynamicarray606

Recomendado

Un código de slowcode552

Reloj de tubo Nixie

Página de inicio de sesión

HTML

CSS

JS

Recomendado

Un código de slowcode552

Reloj de tubo Nixie

Página de inicio de sesión

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS