Juan.Lazaro
/
SIU_Dran_net
1
0
Fork 0
Code Issues Pull Requests Packages Projects 2 Releases Wiki Activity

cambios2

This commit is contained in:
citlallixx03 2024-05-08 08:50:56 -06:00
parent 15c37d966b
commit 31e7d6342c
7 changed files with 119 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/Encabezado.css
View File

@ -1,4 +1,4 @@
.contenedor { /*.contenedor {
max-height: none; max-height: none;
width: 100%; width: 100%;
} }
@ -12,13 +12,13 @@
.banner h1 { .banner h1 {
font-size: 35px; font-size: 35px;
margin-left: 2%; margin-left: 2%;
pointer-events: none; /* Evita que el cursor se posicione sobre el título */ pointer-events: none;
} }
.banner nav { .banner nav {
display: flex; display: flex;
justify-content: space-between; /* Alinea los elementos al principio y al final */ justify-content: space-between;
align-items: center; /* Alinea verticalmente los elementos */ align-items: center;
} }
.opciones { .opciones {
@ -29,15 +29,56 @@
.opciones li { .opciones li {
display: inline-block; display: inline-block;
margin-left: 10px; /* Espacio entre elementos */ margin-left: 10px;
margin-right: 30px; /* Espacio entre elementos */ margin-right: 30px;
} }
.opciones li a { .opciones li a {
color: white; color: white;
text-decoration: none; /* Quita el punto de los enlaces */ text-decoration: none;
} }
.opciones li a:hover { .opciones li a:hover {
text-decoration: underline; /* Subraya los enlaces al pasar el mouse sobre ellos */ text-decoration: underline;
}*/
header.headerOE{
display: inline;
width: 100%;
height: 18%;
text-align: center;
}
div.grupo1{
background-color: #D5EEBB;
padding: 0%;
}
#logo{
width: 70px;
height:min-content;
}
div.grupo2{
background-color: #D5EEBB;
margin-top: 10px;
margin-left: 10px;
text-align: left;
font-size: x-large;
}
li.tit{
background-color: #D5EEBB;
color:rgba(36, 15, 103, 0.922);
font-size: xx-large;
font-weight: bold;
}
nav ul {
list-style-type: none;
background-color:#D5EEBB;
}
nav ul li {
display: inline;
margin-right: 80px;
}
li a{
background-color: #D5EEBB;
color:rgb(172, 104, 9);
} }

21
frontend/src/Encabezado.jsx
View File

@ -3,7 +3,23 @@ import './Encabezado.css';
const Encabezado = () => { const Encabezado = () => {
return ( return (
<div className="contenedor"> <header className='headerOE'>
<nav>
<ul>
<div className='grupo1'>
<img id='logo' src="logo.png" alt='Imagen'/>
<li className='tit'>Universidad Filadelfia de México</li>
</div>
<div className='grupo2'>
<li><a href="">Nosotros</a></li>
<li><a href="">Visión</a></li>
<li><a href="">Misión</a></li>
<li><a href="">Instalaciones</a></li>
</div>
</ul>
</nav>
</header>
/*<div className="contenedor">
<div className="banner"> <div className="banner">
<nav> <nav>
<h1>Universidad de Huacoxla</h1> <h1>Universidad de Huacoxla</h1>
@ -17,7 +33,8 @@ const Encabezado = () => {
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>*/
); );
} }

9
frontend/src/OfertaEducativa.css
View File

@ -2,9 +2,12 @@ h1.tituloOE{
color: rgba(36, 15, 103, 0.922); color: rgba(36, 15, 103, 0.922);
text-transform: capitalize; text-transform: capitalize;
padding-inline:initial; padding-inline:initial;
margin-top:15%; margin-top: 5%;
text-align: center;
font-size: 60px;
} }
header.headerOE{ /*header.headerOE{
display: inline; display: inline;
width: 100%; width: 100%;
height: 18%; height: 18%;
@ -40,7 +43,7 @@ nav ul li {
li a{ li a{
background-color: #D5EEBB; background-color: #D5EEBB;
color:rgb(172, 104, 9); color:rgb(172, 104, 9);
} }*/
.container{ .container{
display: grid; display: grid;
grid-template-columns: auto auto auto auto; grid-template-columns: auto auto auto auto;

35
frontend/src/OfertaEducativa.jsx
View File

@ -1,25 +1,9 @@
import './OfertaEducativa.css' import './OfertaEducativa.css'
function OfertaEducativa (){ const OfertaEducativa = () => {
return( return(
<> <>
<body> <body>
<header className='headerOE'>
<nav>
<ul>
<div className='grupo1'>
<img id='logo' src="logo.png" alt='Imagen'/>
<li className='tit'>Universidad Filadelfia de México</li>
</div>
<div className='grupo2'>
<li><a href="">Nosotros</a></li>
<li><a href="">Visión</a></li>
<li><a href="">Misión</a></li>
<li><a href="">Instalaciones</a></li>
</div>
</ul>
</nav>
</header>
<h1 className='tituloOE'>Oferta Educativa</h1> <h1 className='tituloOE'>Oferta Educativa</h1>
<div className='container'> <div className='container'>
<div className='area'> <div className='area'>
@ -72,3 +56,20 @@ function OfertaEducativa (){
} }
export default OfertaEducativa export default OfertaEducativa
/*<header className='headerOE'>
<nav>
<ul>
<div className='grupo1'>
<img id='logo' src="logo.png" alt='Imagen'/>
<li className='tit'>Universidad Filadelfia de México</li>
</div>
<div className='grupo2'>
<li><a href="">Nosotros</a></li>
<li><a href="">Visión</a></li>
<li><a href="">Misión</a></li>
<li><a href="">Instalaciones</a></li>
</div>
</ul>
</nav>
</header>*/

28
frontend/src/login.css
View File

@ -11,11 +11,12 @@
} }
.imgColum { .imgColum {
margin-top: auto; padding-left:30%;
margin-top: 25%;
} }
.Formulario { form.Formulario {
margin-left: 195px;
font-size: 20px; font-size: 20px;
width:400px; width:400px;
height: 315px; height: 315px;
@ -28,13 +29,13 @@ input[type="text"], input[type="password"]{
border-radius: 5px; border-radius: 5px;
display: block; display: block;
height: 40px; height: 40px;
padding-left: 10px; padding-left: 1px;
padding-right: 10px; padding-right: 10px;
margin-left: auto; margin-left: 0px;
margin-right: auto; margin-right: auto;
font-size: large; font-size: large;
} }
header { header.encabezado {
color: rgba(36, 15, 103, 0.922); color: rgba(36, 15, 103, 0.922);
background-color: #D5EEBB; background-color: #D5EEBB;
padding: 20px 0; /* Espaciado interno del encabezado */ padding: 20px 0; /* Espaciado interno del encabezado */
@ -43,7 +44,8 @@ header {
top: 0; /* Lo posiciona en la parte superior */ top: 0; /* Lo posiciona en la parte superior */
z-index: 1000; /* Asegura que esté por encima del contenido */ z-index: 1000; /* Asegura que esté por encima del contenido */
font-weight:bold; font-weight:bold;
font-size: x-large; font-size:xx-large;
text-align: center;
} }
font{ font{
background-color: transparent; background-color: transparent;
@ -52,17 +54,13 @@ font{
min-height: 89vh; min-height: 89vh;
}*/ }*/
form{ h1.titLogin{
margin-left: auto;
}
h1{
color: rgb(172, 104, 9); color: rgb(172, 104, 9);
font-family: Jockey One; font-family: Jockey One;
text-transform: capitalize; text-transform: capitalize;
margin-top: 30%; margin-top: 20%;
padding-left: 30%; padding-left: 20%;
font-size: 60px;
} }
#button{ #button{
background-color: #D5EEBB; background-color: #D5EEBB;

6
frontend/src/login.jsx
View File

@ -10,13 +10,15 @@ function Login() {
<img src="imagen.jpg" alt='Imagen'/> <img src="imagen.jpg" alt='Imagen'/>
</div> </div>
<div className='loginColum'> <div className='loginColum'>
<h1>Bienvenido</h1> <h1 className='titLogin'>Bienvenido</h1>
<form className='Formulario'> <form className='Formulario'>
<label id='usuario'>Usuario:</label> <label id='usuario'>Usuario:</label>
<input type='text' id='usuario'/> <input type='text' id='usuario'/>
<label>Contraseña:</label> <label>Contraseña:</label>
<input type="password" id='password'/> <input type="password" id='password'/>
<button id='button' >Iniciar sesion</button> <div className='divBoton'>
<button id='button' >Iniciar sesión</button>
</div>
</form> </form>
</div> </div>
</div> </div>

11
frontend/src/main.jsx
View File

@ -1,16 +1,17 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client'
import OfertaEducativa from './OfertaEducativa.jsx' import OfertaEducativa from './OfertaEducativa.jsx'
import Preinscripcion from './Preinscripcion.jsx' import Registro from './Registro.jsx'
import SubirPDF from './SubirPDF.jsx'
import General from './General.jsx'
import './Registro.css' import './Registro.css'
import './login.css'; import './login.css';
import Encabezado from './Encabezado.jsx'
ReactDOM.createRoot(document.getElementById('root')).render( ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode> <React.StrictMode>
<OfertaEducativa/>
<Encabezado/>
<Registro/>
</React.StrictMode>, </React.StrictMode>,
) )