login
This commit is contained in:
parent
1e7b8ec73a
commit
48e69d3c49
|
@ -4,10 +4,15 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
<title>SIU_Dran_net</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<div id="root">
|
||||
|
||||
</div>
|
||||
<DIV></DIV>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,9 +2,12 @@ import { useState } from 'react'
|
|||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import './App.css'
|
||||
import './login.css'
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
//const [count, setCount] = useState(0)
|
||||
const [usuario, setUsuario]= useState("")
|
||||
const [password, setPassword]= useState("")
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -28,8 +31,12 @@ function App() {
|
|||
<p className="read-the-docs">
|
||||
Click on the Vite and React logos to learn more
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
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 App from './App.jsx'
|
||||
import './index.css'
|
||||
import Login from './login.jsx'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<Login />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue