Inicio Blog arrow-menu-nigmacode Cursos Foro

Creando login - HTML & CSS


Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
  <title>Login</title>
</head>
<body>
  <div class="wrapper">
    <div class="container data">
      <div class="header">
        <span>Lorem ipsum dolor sit amet</span>
        <h1>Name of the website</h1>
      </div>
      <div class="subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore beatae</div>
    </div>
    <div class="container login">
      <h2>Login</h2>
      <form action="#">
        <input type="text" placeholder="name@email.com">
        <input type="password" placeholder="*********">
        <input type="submit" value="login">
      </form>
      <div class="social">
        <span>Follow us</span>
        <div class="separator"></div>
        <i class="fab fa-facebook-f"></i> -
        <i class="fab fa-instagram"></i> -
        <i class="fab fa-twitter"></i>
      </div>
    </div>
  </div>
</body>
</html>

Código CSS:

body{
  margin:0;
  padding:0;
  font-family: 'Montserrat', sans-serif;

}
.wrapper{
  height: 600px;
  width: 900px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.container{
  height: 100%;
  width: 50%;
}
/*LEFT CONTAINER*/
.data{
  background-color: #009877;
  float:left;
  text-align:center;
  color:white;
  font-size: 0.8rem;
}
.header{
  padding-top:50%;
}
.header > h1{
  margin:0;
  text-transform: uppercase;
  font-size:1.5rem;
  letter-spacing: 0.2rem;
}
.subheader{
  padding-top:50%;
}
/*RIGHT CONTAINER*/
.login{
  float:right;
}
.login > h2{
  text-align: center;
  margin-top:30%;
}
form{
  text-align: center;
}
input{
  font-family: 'Montserrat', sans-serif;
}
input[type="text"], input[type="password"]{
  width:60%;
  margin-top:1rem;
  border:3px solid #009877;
  padding:6px;
}
input[type="submit"]{
  width:40%;
  margin-top:3rem;
  padding:7px 30px;
  text-transform: capitalize;
  cursor: pointer;
  background-color:#009877;
  border:3px solid #009877;
  color:white;
}
input[type="submit"]:hover{
  transition:0.3s;
  background-color: white;
  color:#009877;
}
.social{
  margin-top:5rem;
  text-align: center;
  color:#009877;
  font-size:1.5rem;

}
.social span{
  display: block;
}
.separator{
  margin:auto;
  width:15%;
  height: 1px;
  background-color: #009877;
  margin-top:0.5rem;
  margin-bottom:1.5rem;
}

Preguntas relacionadas

No hay preguntas sobre este artículo.

¿Tienes alguna duda sobre el artículo? ¡Pregunta!