Skip to content

P
ProyectoFinal-Bootcamp
Commit 78adba53 by Angel Zarate
Options

reformas de los estilos

parent b54142c9
Showing with 86 additions and 367 deletions
src/main/webapp/estilos/form.css → src/main/webapp/form.css
...@@ -43,10 +43,8 @@ p:hover{ ...@@ -43,10 +43,8 @@ p:hover{
/* contenedor */ /* contenedor */
/* para el forrmulario */ /* para el forrmulario */
.form label{ .form label{
display: block; display: block;
border: none; border: none;
align-items:center; align-items:center;
...@@ -94,9 +92,10 @@ border-radius: 10px; ...@@ -94,9 +92,10 @@ border-radius: 10px;
text-decoration:none; text-decoration:none;
background-color: rgba(11, 49, 110, 0.75); background-color: rgba(11, 49, 110, 0.75);
background-image: url(imagenes/descarga.svg); background-image: url(imagenes/descarga.svg);
border-radius: 10px;; border-radius: 5px;;
padding: 15px; padding: 10px;
border-radius: 10px; border-radius: 10px;
margin:10px;
text-decoration: none; text-decoration: none;
color:#ffff; color:#ffff;
text-align:left; text-align:left;
...@@ -104,21 +103,37 @@ border-radius: 10px; ...@@ -104,21 +103,37 @@ border-radius: 10px;
width:80px; width:80px;
text-align:center; text-align:center;
} }
/*hola mundo*/
input#ruby,input#python,input#c,input#javascript,input#java{ input#ruby,input#python,input#c,input#javascript,input#java{
width:20px; width:30px;
} }
input#experiencia_laboral,input#notebook,input#universidad{ input#experiencia_laboral,input#notebook,input#universidad{
width:100px; width:500px;
} }
/* para el alert */
.alert {
padding: 10px;
background-color: background-color: #2196F3;
color: white;
}
.alert.info {background-color: #2196F3;}
.alert.error {background-color: #ff0000;}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
/* parrafo final */ color: black;
//mi parte jose leeme }
</style>
src/main/webapp/formulario.jsp
...@@ -6,7 +6,7 @@ pageEncoding="UTF-8"%> ...@@ -6,7 +6,7 @@ pageEncoding="UTF-8"%>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="estilos/form.css" rel="stylesheet" type="text/css" /> <link href="form.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="imagenes/roshkaicon.ico" sizes="any" /> <link rel="shortcut icon" href="imagenes/roshkaicon.ico" sizes="any" />
<!-- CSS only --> <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
...@@ -99,160 +99,4 @@ pageEncoding="UTF-8"%> ...@@ -99,160 +99,4 @@ pageEncoding="UTF-8"%>
</body> </body>
</html> </html>
<style>
/* el header donde va el logo y el menu */
html,body{
background-image: url(imagenes/descarga.svg);
}
/* damos los estilos a todo lo que contiene el body */
body{
background-color: rgba(11, 49, 110, 0.75);
font-family:Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
color: wheat;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
height: 160%;}
}
/* para el logo */
img{
width: 165px;
padding: 10px;
}
p.enter{
text-align: center;
font-size: 20px;
}
/* para el parrafo */
p:hover{
color: yellow;
}
/* para el create o sea para el main */
.create{
width: 100%;
max-width: 785px;
min-width: 320px;
border-radius: 15px;
background-color: rgba(11, 49, 110, 0.75);
padding: 1rem;
}
/* contenedor */
/* para el forrmulario */
.form label{
display: block;
border: none;
align-items:center;
}
.form input{
display: block;
border: none;
width: 50%;
align-items:center;
}
.form input[type="email"],.form input[type="text"],.form input[type="number"]{
background-color: transparent;
border-radius: 10px;
border: 1px solid #000;
}
.form input:hover{
background-color: wheat;
}
a{
text-decoration: none;
}
ul{
list-style:none;
font-size:15px;
}
a{
text-decoration:none;
color:black;
background-color: #21211d;
border-radius: 10px;
color: #FFF;
padding: 10px;
margin:15px;
text-decoration: none;
cursor: pointer;
background-image: url(imagenes/descarga.svg);
}
.form input[type="reset"] , .form input[type="submit"]{
text-decoration:none;
background-color: rgba(11, 49, 110, 0.75);
background-image: url(imagenes/descarga.svg);
border-radius: 5px;;
padding: 10px;
border-radius: 10px;
margin:10px;
text-decoration: none;
color:#ffff;
text-align:left;
cursor: pointer;
width:80px;
text-align:center;
}
/*hola mundo*/
input#ruby,input#python,input#c,input#javascript,input#java{
width:30px;
}
input#experiencia_laboral,input#notebook,input#universidad{
width:500px;
}
/* para el alert */
.alert {
padding: 10px;
background-color: background-color: #2196F3;
color: white;
}
.alert.info {background-color: #2196F3;}
.alert.error {background-color: #ff0000;}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
<script>
var close = document.getElementsByClassName("enviar");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function(){
var div = this.parentElement;
div.style.opacity = "0";
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>
\ No newline at end of file
src/main/webapp/estilos/home.css → src/main/webapp/home.css
img.logoi{ img.logoi {
width: 200px; width: 200px;
}
} img {
img{
width: 400px; width: 400px;
padding: 10px; padding: 10px;
display: block; display: block;
padding:10px ; padding: 10px;
} }
.header {
.header {
margin-bottom: 0; margin-bottom: 0;
width: 700px; width: 700px;
} }
a{
a {
float: right 100px; float: right 100px;
color: #fff; color: #fff;
font-size: larger; font-size: larger;
text-decoration: none; text-decoration: none;
padding: 10px; padding: 10px;
}
} body {
body {
background: linear-gradient(100deg, rgba(20, 99, 155, 0.25), rgba(30, 148, 227, 0.25)); background: linear-gradient(100deg, rgba(20, 99, 155, 0.25), rgba(30, 148, 227, 0.25));
background-image: url(webapp/imagenes/descarga.svg); background-image: url(imagenes/descarga.svg);
background-size: contain; background-size: contain;
background-attachment: fixed; background-attachment: fixed;
background-blend-mode: multiply; background-blend-mode: multiply;
...@@ -34,8 +33,8 @@ body { ...@@ -34,8 +33,8 @@ body {
position: relative; position: relative;
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
/* ul{ /* ul{
list-style: none; list-style: none;
} }
.menu >ul{ .menu >ul{
...@@ -54,10 +53,10 @@ body { ...@@ -54,10 +53,10 @@ body {
marging-left marging-left
position:relative; position:relative;
} */ } */
.menu {
.menu {
width: 400%; width: 400%;
float: left; float: left;
} }
.menu ul li { .menu ul li {
...@@ -65,20 +64,14 @@ body { ...@@ -65,20 +64,14 @@ body {
list-style-type: none; list-style-type: none;
text-align: right; text-align: right;
} }
div.menu{
float: right;
} div.menu {
html, body { float: right;
margin:0;
padding:0;
height:100%;
} }
.menu ul li a { .menu ul li a {
padding-left: 5px; padding-left: 5px;
text-decoration: none;
font-size: clamp(145px); font-size: clamp(145px);
text-transform: uppercase; text-transform: uppercase;
display: block; display: block;
...@@ -87,60 +80,46 @@ body { ...@@ -87,60 +80,46 @@ body {
padding-bottom: 50px; padding-bottom: 50px;
white-space: nowrap; white-space: nowrap;
} }
.grafico,svg {
.grafico,
svg {
max-width: 50px; max-width: 50px;
display: block; display: block;
height: auto; height: auto;
} }
.seccion.hero {
.seccion.hero {
margin-top: 10px; margin-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
width: 900px; width: 900px;
} }
.hero {
.hero {
perspective: 100px; perspective: 100px;
} }
.hero {
.hero {
display: grid; display: grid;
grid-template-columns: auto repeat(5, 0.5fr) auto; grid-template-columns: auto repeat(5, 0.5fr) auto;
} }
.hero {
.hero {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-left: 200px; padding-left: 200px;
/* padding-right: 200px; /* padding-right: 200px;
*/ */
} }
/* */ /* */
.postulacion{
border-radius: 30px; .postulacion {
} border-radius: 30px;
.cta-main{ }
.cta-main {
width: 200px; width: 200px;
font-family: monospace; font-family: monospace;
background-color: yellow; background-color: yellow;
border: none; border: none;
} }
/* Contenido pie de pagina */
/* usamos media quiere para el responsive */
/* @media (min-width: 768px)
.footer {
display: grid;
grid-template-rows: auto auto;
align-items: flex-start;
gap: 0;
padding: 80px 20px
} */
.footer{
margin-top: 10px;
padding-bottom: 10px;
height:100px;
width: 100px;
display: grid;
}
.menu-footer a{
text-decoration: none;
float: right;
}
\ No newline at end of file
src/main/webapp/index.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<!-- para concectar con css --> <!-- para concectar con css -->
<link rel="stylesheet" href="estilos/home.css"> <link rel="stylesheet" href="home.css">
<!-- el icono para la pagina --> <!-- el icono para la pagina -->
<link rel="shortcut icon" href="imagenes/roshkaicon.ico" sizes="any" /> <link rel="shortcut icon" href="imagenes/roshkaicon.ico" sizes="any" />
...@@ -81,130 +81,3 @@ ...@@ -81,130 +81,3 @@
</body> </body>
</html> </html>
<style>
img.logoi {
width: 200px;
}
img {
width: 400px;
padding: 10px;
display: block;
padding: 10px;
}
.header {
margin-bottom: 0;
width: 700px;
}
a {
float: right 100px;
color: #fff;
font-size: larger;
text-decoration: none;
padding: 10px;
}
body {
background: linear-gradient(100deg, rgba(20, 99, 155, 0.25), rgba(30, 148, 227, 0.25));
background-image: url(imagenes/descarga.svg);
background-size: contain;
background-attachment: fixed;
background-blend-mode: multiply;
font-family: Georgia, 'Times New Roman', Times, serif;
color: white;
position: relative;
width: 100px;
height: 100px;
}
/* ul{
list-style: none;
}
.menu >ul{
float: right;
}
.menu li a {
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}
.menu li ul li {
marging-left
position:relative;
} */
.menu {
width: 400%;
float: left;
}
.menu ul li {
float: right;
list-style-type: none;
text-align: right;
}
div.menu {
float: right;
}
.menu ul li a {
padding-left: 5px;
text-decoration: none;
font-size: clamp(145px);
text-transform: uppercase;
display: block;
position: relative;
overflow: hidden;
padding-bottom: 50px;
white-space: nowrap;
}
.grafico,
svg {
max-width: 50px;
display: block;
height: auto;
}
.seccion.hero {
margin-top: 10px;
padding-bottom: 10px;
width: 900px;
}
.hero {
perspective: 100px;
}
.hero {
display: grid;
grid-template-columns: auto repeat(5, 0.5fr) auto;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
padding-left: 200px;
/* padding-right: 200px;
*/
}
/* */
.postulacion {
border-radius: 30px;
}
.cta-main {
width: 200px;
font-family: monospace;
background-color: yellow;
border: none;
}
</style>
\ No newline at end of file
src/main/webapp/menu.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="shortcut icon" href="imagenes/roshkaicon.ico" sizes="any" />
</head>
<style> <style>
<link href="https://fonts.googleapis.com/css2?family=Concert+One&family=Francois+One&family=Satisfy&family=Staatliches&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Concert+One&family=Francois+One&family=Satisfy&family=Staatliches&display=swap" rel="stylesheet">
......
src/main/webapp/postulante-consulta.jsp
...@@ -5,6 +5,11 @@ ...@@ -5,6 +5,11 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- el icono para la pagina -->
<link rel="shortcut icon" href="imagenes/roshkaicon.ico" sizes="any" />
<!-- coneccion con el de css -->
<link rel="stylesheet" href="postulante.css">
<title>Postulantes Manage</title> <title>Postulantes Manage</title>
</head> </head>
......
src/main/webapp/postulante.css 0 → 100644
body{
background-image: url(imagenes/descarga.svg);
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment