Formulario de inicio de sesión con redes sociales

Publica tu código

Recomendado

31 March 2024

Carrusel de tarjetas JavaScript

15 April 2025

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

Formulario de inicio de sesión con redes sociales

Recomendado

Carrusel de tarjetas JavaScript

Un código de bhviet1510

SITIO WEB DE APPLE

index.html

styles.css

main.js

Recomendado

Carrusel de tarjetas JavaScript

Un código de bhviet1510

SITIO WEB DE APPLE

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js