Formulaire de connexion avec connexion sociale

Publiez votre code

Recommandé

1 March 2023

Curseur de carte animé extensible

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>
    Webleb
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <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" />
  <link rel="stylesheet" href="/css/styles.css" />
</head>
<body style="display: flex; justify-content:center ; align-items: center;height: 100vh;overflow: hidden;">
  <form action="#" id="login-form">
    <div class="heading">Login</i></div>
    <div class="left">
      <label for="email">Email</label> <br />
      <input type="email" name="email" id="email" /> <br />
      <label for="password">Password</label> <br />
      <input type="password" name="password" id="pass" /> <br />
      <input type="submit" value="Login" />
    </div>
    <div class="right">
      <div class="connect">Connect with</div>
      <a href="https://www.web-leb.com/code" class="facebook">
        <i class="fa-brands fa-facebook-f" aria-hidden="true"></i>
      </a> <br />
      <a href="https://www.web-leb.com/code" class="google">
        <i class="fa-brands fa-google" aria-hidden="true"></i>
      </a> <br />
      <a href="https://www.web-leb.com/code" class="github">
        <i class="fa-brands fa-github" aria-hidden="true"></i>
      </a>
    </div>
  </form>  
  <script src="/js/main.js"></script>
</body>
</html>

styles.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");

body {
  background: #3f2b96;
  font-family: "Inter", "DM Sans", Arial, sans-serif;
}

form#login-form {
  background: #fff;
  width: 38em;
  margin: 2em auto;
  overflow: hidden;
  position: relative;
  border-radius: 0.3em;
}
form#login-form div.heading {
  background: #000000;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  padding: 1.5em;
  font-size: 1.1em;
}

form#login-form div.left {
  width: 50%;
  float: left;
  padding: 1.7em 1.5em 2.5em 1.5em;
  box-sizing: border-box;
}

div.left label {
  display: inline-block;
  color: gray;
  font-size: 1.1em;
  margin-top: 0.6em;
}

div.left input[type="email"],
div.left input[type="password"] {
  border: 0.1em solid #dfdfdf;
  padding: 1em;
  margin: 0.6em 0;
  max-width: 88.5%;
  outline: none;
  border-radius: 5px;
}
div.left input[type="submit"] {
  background: #000000;
  color: #fff;
  outline: none;
  padding: 1em;
  overflow: hidden;
  border: none;
  letter-spacing: 0.1em;
  margin: 0.5em 0;
  border-radius: 0.4em;
  width: 50%;
  cursor: pointer;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
hr,
input {
  overflow: visible;
}

user agent stylesheet input:not([type="range"]):not([type="color"]) {
  writing-mode: horizontal-tb !important;
}

form#login-form div.right {
  width: 50%;
  float: right;
  padding: 1.7em 1.5em 2.5em 1.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div.right div.connect {
  color: gray;
  font-size: 1.1em;
  text-align: center;
}

div.right a.facebook {
  background: #3a589a;
  margin-top: 0.8em;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

div.right a.google {
  background: #d1231a;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

div.right a.github {
  background: #000000;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

div.right a {
  display: inline-block;
  font-size: 1.5em;
  text-decoration: none;
  color: white;
  width: 9em;
  padding: 0.55em 0.3em;
  clear: both;
  text-align: center;
  margin: 0.5em 0.1em;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

Formulaire de connexion avec connexion sociale

Recommandé

Formulaire de connexion CSS

Carte HTML de l'application

Curseur de carte animé extensible

index.html

styles.css

main.js

Recommandé

Formulaire de connexion CSS

Carte HTML de l'application

Curseur de carte animé extensible

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js