mot de passe de connexion

2,095 cleancloud166

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 March 2023

Barre de navigation Bootstrap responsive

17 July 2025

Modèle HTML de tableau de bord Couture Atelier

27 May 2025

Carte de paiement

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