Formulaire de connexion responsive

Publiez votre code

Recommandé

23 July 2024

<html>
<head>
  <meta charset="utf-8" />
  <title>Webleb</title>
  <link href="/css/styles.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="align">
  <div class="grid">
    <form  method="POST" class="form login">
      <div class="form_field">
        <label><i class="fa fa-user" style="color: #606468;"></i></label>
        <input type="text" name="username" class="form_input" placeholder="Username" required>
      </div>
      <div class="form_field">
        <label><i class="fa fa-lock" style="color: #606468;"></i></label>
        <input type="password" name="password" class="form_input" placeholder="Password" required>
      </div>
      <div class="form_field">
        <button class="submitButton" type="submit">Submit</button>
      </div>
    </form>
    <p class="text--center">Not a member? <a href="https://www.web-leb.com/code">Register</a></p>
  </div>
</body>
</html>

styles.css

.align{
  display: grid;
  place-items: center;
}
.grid {
  inline-size: 90%;
  margin-inline: auto;
  max-inline-size: 20rem;
}
* {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 100%;
}
body {
  background: -webkit-linear-gradient(to right, #ffffff, #abbaab);
  background: linear-gradient(to right, #ffffff, #abbaab); 
  color: #606468;
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  min-block-size: 100vh;
}
a {
  color: #606468;
  outline: 0;
  text-decoration: none;
}
input {
  background-image: none;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  transition: background-color 0.3s;
}
input[type="submit"] {
  cursor: pointer;
  text-decoration: none;
}
.form {
  display: grid;
  gap: 0.875rem;
}
.form input[type="password"],
.form input[type="text"],
.submitButton {
  inline-size: 100%;
}
.form_field {
  display: flex;
}
.form_input {
  flex: 1;
}
.login {
  color: #eee;
}
.login label,
.login input[type="text"],
.login input[type="password"],
.submitButton {
  border-radius:0.25rem;
  padding: 1rem;
}
.login label {
  background-color: #363b41;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding-inline: 1.25rem;
}
.login input[type="password"],
.login input[type="text"] {
  background-color: #3b4148;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.login input[type="password"]:hover,
.login input[type="text"]:hover {
  background-color: #434a52;
}
.submitButton {
  background-color: #270cbf;
  color: #eee;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}
.submitButton:hover {
  background-color: #3200e6;
}
p {
  margin-block: 1.5rem;
}
.text--center {
  text-align: center;
}

Formulaire de connexion responsive

Recommandé

Connexion au verre

Un code par mabsolinfotech

Hacker de connexion

index.html

styles.css

main.js

Recommandé

Connexion au verre

Un code par mabsolinfotech

Hacker de connexion

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js