Commit correcciones login
This commit is contained in:
NataliaCancinoV
parent
ecb7e14a63
commit
65c5583acc
|
|
@ -1,42 +0,0 @@
|
|||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import './App.css'
|
||||
import LoginForm from './LoginForm'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<div className="App">
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -1,26 +1,27 @@
|
|||
/* POPPINS FONT */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
|
||||
|
||||
*{
|
||||
.body-login{
|
||||
background: url("fondo_pasteles.jpg");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
background-attachment: fixed;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
body{
|
||||
background: url("fondo_pasteles.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 40%;
|
||||
height: 100vh;
|
||||
padding-left: 4px;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
border-radius: 4%;
|
||||
background: rgba(39, 39, 39, 0.5);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.link:hover, .active{
|
||||
|
|
@ -45,9 +46,11 @@ body{
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 512px;
|
||||
height: 420px;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
border-radius: 4%;
|
||||
background: rgba(39, 39, 39, 0.5);
|
||||
}
|
||||
.login-container{
|
||||
position: absolute;
|
||||
|
|
@ -105,7 +108,7 @@ body{
|
|||
color: #fff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
header{
|
||||
.header-login{
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useState } from 'react';
|
||||
import './LoginForm.css';
|
||||
import './App.css'
|
||||
|
||||
function LoginForm() {
|
||||
const [loginVisible, setLoginVisible] = useState(true);
|
||||
|
|
@ -25,17 +24,16 @@ function LoginForm() {
|
|||
setRegisterVisible(false);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<body className='body-login'>
|
||||
<div className="wrapper">
|
||||
<div className="form-box">
|
||||
|
||||
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
|
||||
<form>
|
||||
<div className="top">
|
||||
<span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
|
||||
<header>Inicia Sesión</header>
|
||||
<header className='header-login'>Inicia Sesión</header>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
|
|
@ -66,7 +64,7 @@ function LoginForm() {
|
|||
<form>
|
||||
<div className="top">
|
||||
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
||||
<header>Registrarse</header>
|
||||
<header className='header-login'>Registrarse</header>
|
||||
</div>
|
||||
<div className="two-forms">
|
||||
<div className="input-box">
|
||||
|
|
@ -103,7 +101,7 @@ function LoginForm() {
|
|||
<form>
|
||||
<div className="top2">
|
||||
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
||||
<header>Recuperar Contraseña</header>
|
||||
<header className='header-login'>Recuperar Contraseña</header>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
|
|
@ -122,6 +120,8 @@ function LoginForm() {
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import AppInicio from './AppInicio.jsx'
|
|||
import PersPastel1 from './PersPastel1.jsx'
|
||||
import Pedidos from './Pedidos.jsx'
|
||||
import Pasteles from './Pasteles.jsx'
|
||||
import LoginForm from './LoginForm.jsx';
|
||||
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
|
|
@ -15,6 +16,7 @@ createRoot(document.getElementById('root')).render(
|
|||
<Route path = "/PersonalizarPastel/PastelArcoiris" element = {<PersPastel1/>}/>
|
||||
<Route path = "/Pedidos" element = {<Pedidos/>}/>
|
||||
<Route path = "/Pasteles" element = {<Pasteles/>}/>
|
||||
<Route path = "/Login" element = {<LoginForm/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
</React.StrictMode>,
|
||||
|
|
|
|||
Loading…
Reference in New Issue