Ejemplo de formulario de inicio de sesión HTML con inicio de sesión social

302 Kolson913

Abrir en el editor Publica tu código

Ejemplo de formulario de inicio de sesión HTML con inicio de sesión social

Recomendado

1 January 2025

Animación CSS de texto degradado

29 May 2025

Un código de mathieu.ratro

29 December 2025

Control deslizante de imágenes HTML CSS JavaScript

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>

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