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

View File

@ -1,4 +1,4 @@
.contenedor {
/*.contenedor {
max-height: none;
width: 100%;
}
@ -12,13 +12,13 @@
.banner h1 {
font-size: 35px;
margin-left: 2%;
pointer-events: none; /* Evita que el cursor se posicione sobre el título */
pointer-events: none;
}
.banner nav {
display: flex;
justify-content: space-between; /* Alinea los elementos al principio y al final */
align-items: center; /* Alinea verticalmente los elementos */
justify-content: space-between;
align-items: center;
}
.opciones {
@ -29,15 +29,56 @@
.opciones li {
display: inline-block;
margin-left: 10px; /* Espacio entre elementos */
margin-right: 30px; /* Espacio entre elementos */
margin-left: 10px;
margin-right: 30px;
}
.opciones li a {
color: white;
text-decoration: none; /* Quita el punto de los enlaces */
text-decoration: none;
}
.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);
}

View File

@ -3,7 +3,23 @@ import './Encabezado.css';
const Encabezado = () => {
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">
<nav>
<h1>Universidad de Huacoxla</h1>
@ -17,7 +33,8 @@ const Encabezado = () => {
</ul>
</nav>
</div>
</div>
</div>*/
);
}

View File

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

View File

@ -1,25 +1,9 @@
import './OfertaEducativa.css'
function OfertaEducativa (){
return (
const OfertaEducativa = () => {
return(
<>
<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>
<div className='container'>
<div className='area'>
@ -72,3 +56,20 @@ function 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>*/

View File

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

View File

@ -10,13 +10,15 @@ function Login() {
<img src="imagen.jpg" alt='Imagen'/>
</div>
<div className='loginColum'>
<h1>Bienvenido</h1>
<h1 className='titLogin'>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>
<div className='divBoton'>
<button id='button' >Iniciar sesión</button>
</div>
</form>
</div>
</div>

View File

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