diff --git a/frontend/index.html b/frontend/index.html index 0c589ec..d5e6f5c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - Vite + React + Registro
diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/frontend/src/App.css +++ /dev/null @@ -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; -} diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx deleted file mode 100644 index b8b8473..0000000 --- a/frontend/src/App.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' - -function App() { - const [count, setCount] = useState(0) - - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) -} - -export default App diff --git a/frontend/src/Encabezado.css b/frontend/src/Encabezado.css new file mode 100644 index 0000000..c4222d5 --- /dev/null +++ b/frontend/src/Encabezado.css @@ -0,0 +1,43 @@ +.contenedor { + max-height: none; + width: 100%; +} + +.banner { + background-color: #333; + color: white; + padding: 2px; +} + +.banner h1 { + font-size: 35px; + margin-left: 2%; + pointer-events: none; /* Evita que el cursor se posicione sobre el título */ +} + +.banner nav { + display: flex; + justify-content: space-between; /* Alinea los elementos al principio y al final */ + align-items: center; /* Alinea verticalmente los elementos */ +} + +.opciones { + list-style: none; + padding: 0; + margin: 0; +} + +.opciones li { + display: inline-block; + margin-left: 10px; /* Espacio entre elementos */ + margin-right: 30px; /* Espacio entre elementos */ +} + +.opciones li a { + color: white; + text-decoration: none; /* Quita el punto de los enlaces */ +} + +.opciones li a:hover { + text-decoration: underline; /* Subraya los enlaces al pasar el mouse sobre ellos */ +} \ No newline at end of file diff --git a/frontend/src/Encabezado.jsx b/frontend/src/Encabezado.jsx new file mode 100644 index 0000000..fef6524 --- /dev/null +++ b/frontend/src/Encabezado.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import './Encabezado.css'; + +const Encabezado = () => { + return ( +
+
+ +
+
+ ); +} + +export default Encabezado; \ No newline at end of file diff --git a/frontend/src/General.jsx b/frontend/src/General.jsx new file mode 100644 index 0000000..e716187 --- /dev/null +++ b/frontend/src/General.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import Encabezado from './Encabezado'; +import Registro from './Registro'; + +function General() { + return ( +
+ + +
+ ); +} + +export default General; diff --git a/frontend/src/Registro.css b/frontend/src/Registro.css new file mode 100644 index 0000000..be0c438 --- /dev/null +++ b/frontend/src/Registro.css @@ -0,0 +1,89 @@ + .formulario { + background-color: #e4e4df; + max-width: 100%; + margin: 0 auto; + padding: 1%; + } + + .formulario h2 { + text-align: center; + font-size: 40px; + font-style: Jockey One; + color: #000000; + padding: 10px; + } + + .formulario h4{ + font-size: 20px; + font-style: Jockey One; + color: #000000; + padding: 10px; + } + + + .form { + margin-top: 20px; /* Espacio entre el h5 y el formulario */ + padding: 10px; + display: flex; + flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben en una sola línea */ + } + + .form { + margin-top: 20px; /* Espacio entre el h5 y el formulario */ + padding: 10px; + display: flex; + flex-wrap: wrap; /* Permitir que los elementos se envuelvan en filas */ + justify-content: space-between; /* Distribuir los elementos en tres columnas */ + } + + .campo { + width: calc(33.33% - 10px); /* Ancho de cada campo (menos el espacio entre ellos) */ + margin-bottom: 20px; /* Espacio entre campos */ + display: flex; + flex-direction: column; /* Cambiar la dirección del flujo a vertical */ + overflow: hidden; /* Oculta cualquier contenido que se desborde del área del input */ + + } + + .campo label { + padding: 2%; + font-weight: bold; + } + + .campo input[type="text"], + .campo input[type="number"], + .campo select, + .campo input[type="password"], + .campo input[type="date"], + .campo input[type="email"] { + width: 100%; /* Ocupar todo el ancho disponible */ + padding: 5px; + border-radius: 5px; + border: 1px solid #ccc; + box-sizing: border-box; + font-size: 16px; + transition: border-color 0.3s ease; + margin-top: 5px; /* Espacio entre el label y el input */ + } + + + .btnenviar{ + text-align: center; /* Centra horizontalmente el contenido */ + } + + .boton { + text-align: center; + background-color: #007bff; + color: white; + border: none; + padding: 15px 30px; + cursor: pointer; + border-radius: 5px; + font-weight: bold; /* Hace que el texto esté en negrita */ + } + + .boton:hover { + background-color: #0056b3; + } + + \ No newline at end of file diff --git a/frontend/src/Registro.jsx b/frontend/src/Registro.jsx new file mode 100644 index 0000000..b4dc63c --- /dev/null +++ b/frontend/src/Registro.jsx @@ -0,0 +1,118 @@ +import React from 'react'; +import './Registro.css'; // Estilo para el formulario + +const Registro = () => { + + return ( +
+

Registro

+

Datos Personales

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+

Datos de Tutor

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+ ); +} + +export default Registro; diff --git a/frontend/src/assets/student.jpg b/frontend/src/assets/student.jpg new file mode 100644 index 0000000..1d05547 Binary files /dev/null and b/frontend/src/assets/student.jpg differ diff --git a/frontend/src/index.css b/frontend/src/index.css deleted file mode 100644 index 6119ad9..0000000 --- a/frontend/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 54b39dd..d19a238 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,10 +1,10 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' +import General from './General.jsx' +import './Registro.css' ReactDOM.createRoot(document.getElementById('root')).render( - + , )