contraseña de inicio de sesión

2,279 cleancloud166

Abrir en el editor Publica tu código

Recomendado

25 November 2025

Condenar

16 October 2025

Ejemplo de elemento de carga animado CSS

19 May 2025

Animación de caja de moscas en 3D

HTML

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./bekzat.css" />
    <link rel="stylesheet" href="boxicons/css/boxicons.css" />
    <title>Andev web</title>
  </head>
  <body>
    <div class="box">
      <div class="container">
        <div class="top-header">
          <span>mambetov</span>
          <header>Login password</header>
        </div>

CSS

* {
  font-family: "Poppins", sans-serif;
}
body {
  background-color: black;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  /* background-image: url(./xaycNDmeyxpHDrPqU6LmaD-1200-80.jpg); */
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
}
.container {
  width: 350px;
  display: flex;
  flex-direction: column;
  padding: 0 15px 0 15px;
  border: solid rgb(9, 232, 61);
  height: 400px;
  border-radius: 20px;
}
span {
  color: #fff;
  font-size: small;
  display: flex;
  justify-content: center;
  padding: 10px 0 15px 0;
}
header {
  color: #fff;
  font-size: 30px;
  display: flex;
  justify-content: center;
  padding: 0 0 15px 0;
}
.input-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.input-field .input {
  height: 45px;
  width: 87%;
  border: none;
  outline: none;
  border-radius: 30px;
  color: #fff;
  padding: 0 0 0 42px;
  background: rgba(255, 255, 255, 0.1);
}
i {
  position: relative;
  top: -31px;
  left: 17px;
  color: #fff;
}
::-webkit-input-placeholder {
  color: #fff;
}
.submit {
  border: none;
  border-radius: 30px;
  font-size: 15px;
  height: 45px;
  outline: none;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: 0.3s;
}
.submit:hover {
  box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
}
.bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: small;
  color: #fff;
  margin-top: 10px;
}
.left {
  display: flex;
}
label a {
  color: #fff;
  text-decoration: none;
}