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

170 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

16 November 2023

Página OTP con CSS

7 September 2024

Descubre el mensaje de la carta de amor

19 January 2026

Insertar juego Flash con Ruffle Player

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