login senha

1327 cleancloud166

Abrir no Editor Publique Seu Código

Recomendado

23 August 2025

Formulário de login HTML com alternância de senha

14 September 2024

Formulário de Login Moderno

23 August 2025

Formulário de login e registro HTML CSS Template

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

Recomendado

Formulário de login HTML com alternância de senha

Formulário de Login Moderno

Formulário de login e registro HTML CSS Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS