mot de passe de connexion

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 June 2025

Formulaire de connexion simple

25 November 2025

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

mot de passe de connexion

Recommandé

Un code par alejandrokundrah

Formulaire de connexion simple

Fusion de bâtons

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Formulaire de connexion simple

Fusion de bâtons

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS