Html5 y Css3

Formulario de Login Con Html5 y Css3

login_img
Compartir en:

index.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">
  <title>Login</title>
  <link rel="stylesheet" href="estilos.css">
  <script src="all.min.js"></script>
</head>
<body>
  <div class="container">
        <div class="login">
      <div class="logo">
        <img src="../img/logo.jpg" alt="">
      </div>
      <div class="grupo">
        <i class="fas fa-user"></i>
        <input type="text" placeholder="Usuario">
      </div>
      <div class="grupo">
        <i class="fas fa-key"></i>
        <input type="password" placeholder="Contraseña">
      </div>
      <button type="button" class="btn">Login</button>
      <div class="registrar">
          <a href="#">Registrarse</a>
      </div>
    </div>
    <div class="descripcion">
    <div class="titulo">
        <h2>Vida Informático</h2>
        <img src="../img/img7.jpg" class="des_logo">    
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laudantium maxime necessitatibus nulla aperiam, adipisci quos numquam, incidunt porro facere et voluptatibus sapiente repellendus, possimus eligendi quam inventore minima iure dolor ad fugiat? Placeat quo tempore animi pariatur unde veritatis modi, rerum cupiditate reprehenderit libero sunt, fuga ad eaque quas!</p>
    </div>
  </div>
</body>
</html>

estilos.css

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body{
    padding: 20px;
}
.container{
  width: 70%;
    max-width: 1000px;
    margin: auto;
    margin-top: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-radius: 0px 50px;
     -webkit-box-shadow: 0px 0px 2px gray,
  0px 0px 0px 5px #ecf0f3,
  8px 8px 15px #a7aaaf,
  -8px -8px 15px white;
    box-shadow: 0px 0px 2px gray,
  8px 8px 15px #a7aaaf,
  -8px -8px 15px white;
}
.login{
  width: 50%;
  padding: 10px 40px;
}
.descripcion{
    width: 60%;
    background-color: red;
    background-position: center;
    background-size: cover;
    background-image: url(../img/img9.jpg);
    padding: 20px;
    
}
.logo{
  width: 100px;
  height: 100px;
  display: block;
  margin: auto;
  border-radius: 50%;
    -webkit-box-shadow: 0px 0px 2px gray,
  0px 0px 0px 5px #ecf0f3,
  8px 8px 15px #a7aaaf,
  -8px -8px 15px white;
    box-shadow: 0px 0px 2px gray,
  0px 0px 0px 5px #ecf0f3,
  8px 8px 15px #a7aaaf,
  -8px -8px 15px white;
  overflow: hidden;
  margin-bottom: 50px;
}
.logo img{
  width: 100%;
}
.grupo{
  width: 100%;
  padding: 10px;
  -webkit-box-shadow: inset 2px 2px 3px #cbced1,
  inset -8px -8px 8px white;
  box-shadow: inset 2px 2px 3px #515152,
  inset -8px -8px 8px white;
  border-radius: 10px;
    margin-top: 18px;
}
.grupo input{
  border: none;
  outline: none;
}
.btn{
  width: 100%;
  border: none;
  border-radius: 5px;
background-color: crimson;
  padding: 10px;
    -webkit-box-shadow: 0px 0px 2px #030000,
  0px 0px 1px  #030000;
    box-shadow: 0px 0px 2px #030000,
  0px 0px 1px  #030000;
    cursor: pointer;
    color: white;
    margin-top: 30px;
}

.registrar{
  width: 100%;
text-align: center;
  padding: 10px;
    cursor: pointer;
    margin-top: 20px;
}
a{
    text-decoration: none;
    margin: 15px;
}
.titulo{
    text-align: center;
    color: white;
    font-family: cursive;
    letter-spacing: 1px;
}
.des_logo{
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-size: cover;
    border-radius: 50%;
    -webkit-box-shadow: 2px 2px 2px black;
    box-shadow: 2px 2px 2px black;
}
p{
    text-align: justify;
    margin-top: 20px;
    font-family: serif;
    color: black;
    text-shadow: 1px 1px white;
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *