Webleb - HTML UI Elements -

Abrir no Editor Publique Seu Código

Recomendado

10 June 2025

Um Código por alejandrokundrah

10 June 2025

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

Recomendado

Um Código por alejandrokundrah

Um código de Mete

Um código de Mete

HTML

CSS

JS

Recomendado

Um Código por alejandrokundrah

Um código de Mete

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS