Formulaire de connexion responsive

Publiez votre code

Recommandé

9 December 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é

Un code par slowlogic992

Slider de cartes JavaScript

Un code par anhtuanle2004thl

index.html

styles.css

main.js

Recommandé

Un code par slowlogic992

Slider de cartes JavaScript

Un code par anhtuanle2004thl

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js