Login Form with Social Login

Publish Your Code

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

Login Form with Social Login

Recommended

Newsletter Subscription Form

404 Page with Parallax

FORMULAIRE DE LOCATION DE VOITURE

index.html

styles.css

main.js

Recommended

Newsletter Subscription Form

404 Page with Parallax

FORMULAIRE DE LOCATION DE VOITURE

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js