Se crea el archivo para la página de inicio de sesión

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

* {

    margin: 10;

    padding: 0;

    font-family: 'Poppins', sans-serif;

    box-sizing: border-box;

}

.login-page-root{

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    width: 100vw;

}

.login-form-container{

    border-radius: 15px;

    background: white;

    display: grid;

    place-items: center;

    box-shadow: 0px 15px 20px rgba(0,0,0,0.1);

}

.login-form-container .title{

    font-size: 35px;

    font-weight: 600;

    width: 100%;

    color: white;

    line-height: 50px;

    text-align: center;

    user-select: none;

    border-radius: 15px 15px 0 0;

    background: linear-gradient(-140deg,#413d3d, rgb(0, 0, 0))

}

.login-form-container form{

    padding: 10px 40px 50px 30px;

}

.login-form-container .login-form-field{

    position: relative;

    height: 50px;

    width: 100%;

    margin-top: 20px;

}

.login-form-container form .login-form-field input{

    height: 100%;

    width: 100%;

    outline: none;

    font-size: 17px;

    padding-left: 20px;

    padding-right: 30px;

    border: 1px solid  lightgray;

    border-radius: 15px;

    transition: all 0.3s ease;

}

.login-form-container form .login-form-field input:focus,

form .login-form-field input:valid{

    border-color: #4158d0;

}

.login-form-container form .login-form-field label{

    position: absolute; 

    top: 50%;

    left: 20px;

    color: #999999;

    font-weight: 400;

    font-size: 17px;

    pointer-events: none;

    transform: all 0.3s ease;

    transform: translateY(-50%);

}

.login-form-container form .login-form-field .pass-visibility-button{

    position: absolute; 

    top: 50%;

    right: 5px;

    transform: translateY(-50%);

    transform: all 0.3s ease;

    cursor: pointer;

}

form .login-form-field input:focus ~ label,

form .login-form-field input:valid ~ label,

form .login-form-field input[type="email"]:not(:placeholder-shown) ~ label,

form .login-form-field input[type="email"]:focus ~ label {

    top: 0%;

    color: #4158d0;

    font-size: 16px;

    background-color: white;

    transform: translateY(-50%);

}

.login-form-container form .login-form-button {

    height: 50px;

    width: 100%;

    margin-top: 20px;

    position: relative;

}

form .login-form-button input{

    color: white;

    border: none;

    padding-left: 0;

    margin-top: -10px;

    font-size: 20px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s ease;

    background: black;

    width: 100%;

    border-radius: 5px;

}

form .login-form-button input:active {

    transform: scale(0.95);

}

 No newline at end of file