Commit cambios LoginForm y css
This commit is contained in:
NataliaCancinoV
parent
4c62ae9ba0
commit
1a47b68afe
|
|
@ -48,7 +48,6 @@ body{
|
|||
height: 420px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
|
||||
}
|
||||
.login-container{
|
||||
position: absolute;
|
||||
|
|
@ -58,7 +57,6 @@ body{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: .5s ease-in-out;
|
||||
gap: 7px;
|
||||
}
|
||||
.register-container{
|
||||
position: absolute;
|
||||
|
|
@ -85,6 +83,13 @@ body{
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.top2 span{
|
||||
color: #fff;
|
||||
font-size: small;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.two span a{
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
|
|
@ -121,6 +126,7 @@ header{
|
|||
border-radius: 30px;
|
||||
outline: none;
|
||||
transition: .2s ease;
|
||||
margin-bottom: 10px; /*para separar los componentes agregando un margen por debajo*/
|
||||
}
|
||||
.input-field:hover, .input-field:focus{
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
|
|
@ -130,6 +136,16 @@ header{
|
|||
}
|
||||
.input-box i{
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
top: -35px;
|
||||
left: 17px;
|
||||
color: #fff;
|
||||
}
|
||||
.input-box i{
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
top: -35px;
|
||||
left: 17px;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ function LoginForm() {
|
|||
const [loginVisible, setLoginVisible] = useState(true);
|
||||
const [registerVisible, setRegisterVisible] = useState(false);
|
||||
const [passwordVisible, setPasswordVisible] = useState(false);
|
||||
|
||||
const toggleLogin = () => {
|
||||
setLoginVisible(true);
|
||||
setRegisterVisible(false);
|
||||
|
|
@ -23,100 +24,101 @@ function LoginForm() {
|
|||
setRegisterVisible(false);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="wrapper">
|
||||
|
||||
<div className="form-box">
|
||||
|
||||
<div className="form-box">
|
||||
|
||||
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
|
||||
<div className="top">
|
||||
<span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
|
||||
<header>Inicia Sesión</header>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-user"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="password" className="input-field" placeholder="Contraseña" />
|
||||
<i className="bx bx-lock-alt"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="submit" className="submit" value="Entrar" />
|
||||
</div>
|
||||
<div className="two-col">
|
||||
<div className="one">
|
||||
<input type="checkbox" id="login-check" />
|
||||
<label htmlFor="login-check"> Recuerdame</label>
|
||||
<form>
|
||||
<div className="top">
|
||||
<span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
|
||||
<header>Inicia Sesión</header>
|
||||
</div>
|
||||
<div className="two">
|
||||
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="password" className="input-field" placeholder="Contraseña" />
|
||||
<i className="bx bx-lock-alt"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
{/*<input type="submit" className="submit" value="Entrar" />*/}
|
||||
<button type="button" className="submit">Entrar</button>
|
||||
</div>
|
||||
<div className="two-col">
|
||||
<div className="one">
|
||||
<input type="checkbox" id="login-check" />
|
||||
<label htmlFor="login-check"> Recuerdame</label>
|
||||
</div>
|
||||
<div className="two">
|
||||
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
|
||||
<div className="top">
|
||||
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
||||
<header>Registrarse</header>
|
||||
</div>
|
||||
<div className="two-forms">
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Nombre" />
|
||||
<i className="bx bx-user"></i>
|
||||
<form>
|
||||
<div className="top">
|
||||
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
||||
<header>Registrarse</header>
|
||||
</div>
|
||||
<div className="two-forms">
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Nombre" />
|
||||
<i className="bx bx-user"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Apellido" />
|
||||
<i className="bx bx-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Apellido" />
|
||||
<i className="bx bx-user"></i>
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-envelope"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-envelope"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="password" className="input-field" placeholder="Contraseña" />
|
||||
<i className="bx bx-lock-alt"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="submit" className="submit" value="Registrarse" />
|
||||
</div>
|
||||
<div className="two-col">
|
||||
<div className="one">
|
||||
<input type="checkbox" id="register-check" />
|
||||
<label htmlFor="register-check"> Recuerdame</label>
|
||||
<div className="input-box">
|
||||
<input type="password" className="input-field" placeholder="Contraseña" />
|
||||
<i className="bx bx-lock-alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
{/*<input type="submit" className="submit" value="Registrarse"/>*/}
|
||||
<button type="button" className="submit">Registrarse</button>
|
||||
</div>
|
||||
<div className="two-col">
|
||||
<div className="one">
|
||||
<input type="checkbox" id="register-check" />
|
||||
<label htmlFor="register-check"> Recuerdame</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
|
||||
<div className="top2">
|
||||
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
||||
<header>Recuperar Contraseña</header>
|
||||
</div>
|
||||
<div className="two-forms">
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Nombre" />
|
||||
<i className="bx bx-user"></i>
|
||||
<form>
|
||||
<div className="top2">
|
||||
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
||||
<header>Recuperar Contraseña</header>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Apellido" />
|
||||
<i className="bx bx-user"></i>
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-envelope"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-envelope"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="password" className="input-field" placeholder="Nueva contraseña" />
|
||||
<i className="bx bx-lock-alt"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="submit" className="submit" value="Cambiar contraseña" />
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="password" className="input-field" placeholder="Nueva contraseña" />
|
||||
<i className="bx bx-lock-alt"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
{/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
|
||||
<button type="button" className="submit">Cambiar contraseña</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue