login
This commit is contained in:
parent
1e7b8ec73a
commit
48e69d3c49
|
@ -4,10 +4,15 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React</title>
|
<title>SIU_Dran_net</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
|
||||||
|
<div id="root">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<DIV></DIV>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -2,9 +2,12 @@ import { useState } from 'react'
|
||||||
import reactLogo from './assets/react.svg'
|
import reactLogo from './assets/react.svg'
|
||||||
import viteLogo from '/vite.svg'
|
import viteLogo from '/vite.svg'
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
import './login.css'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [count, setCount] = useState(0)
|
//const [count, setCount] = useState(0)
|
||||||
|
const [usuario, setUsuario]= useState("")
|
||||||
|
const [password, setPassword]= useState("")
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -28,8 +31,12 @@ function App() {
|
||||||
<p className="read-the-docs">
|
<p className="read-the-docs">
|
||||||
Click on the Vite and React logos to learn more
|
Click on the Vite and React logos to learn more
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default App
|
export default App
|
||||||
|
|
|
@ -0,0 +1,52 @@
|
||||||
|
* {
|
||||||
|
background-color: #444941;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family:Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.Formulario {
|
||||||
|
|
||||||
|
font-size: 20px;
|
||||||
|
width:400px;
|
||||||
|
height: 315px;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 5%;
|
||||||
|
}
|
||||||
|
input[type="text"], input[type="password"]{
|
||||||
|
background:#D5EEBB;
|
||||||
|
/* align-items: center; */
|
||||||
|
border-radius: 5px;
|
||||||
|
display: block;
|
||||||
|
height: 30px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: #D5EEBB;
|
||||||
|
font-family: Jockey One;
|
||||||
|
|
||||||
|
}
|
||||||
|
#button{
|
||||||
|
background-color: #D5EEBB;
|
||||||
|
margin-top: 20px;
|
||||||
|
stroke: none;
|
||||||
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-top: 100px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
color: #D5EEBBAA;
|
||||||
|
font-family: JejuMyeongjo;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
color: aliceblue;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import './login.css'
|
||||||
|
|
||||||
|
function Login() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header>La universidad que esta para ti, ¡UNETE!</header>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<h1>Bienvenido</h1>
|
||||||
|
<form className='Formulario'>
|
||||||
|
|
||||||
|
<label id='usuario'>Usuario:</label>
|
||||||
|
<input type='text' id='usuario'/>
|
||||||
|
<label>Contraseña:</label>
|
||||||
|
<input type="password" id='password'/>
|
||||||
|
<button id='button'>Iniciar sesion</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<nav>
|
||||||
|
<ul className='footer'>
|
||||||
|
<li>uniregistro@outlook.com</li>
|
||||||
|
<li>uniBandeVer 4582349234</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Login
|
|
@ -2,9 +2,12 @@ import React from 'react'
|
||||||
import ReactDOM from 'react-dom/client'
|
import ReactDOM from 'react-dom/client'
|
||||||
import App from './App.jsx'
|
import App from './App.jsx'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
import Login from './login.jsx'
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<Login />
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue