Jump to content

Luis Martin

Members
  • Posts

    1
  • Joined

  • Last visited

Luis Martin's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hello I have this code <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="estilos1.css"> </head> <body> <div class="container"> <header class="header"> <img src="assets/images/Logo Kimer_239x135.png" class="imagenLogo" /> </header> <div class="tituloPagina"> <span class="textoTituloPagina"> <p> PLATAFORMA DE PAGOS ONLINE</p> </span> </div> <div class="main"> <form class="frmLogin"> <p class="tituloFrmLogin">Ingrese número de DNI y contraseña</p> <div class="contenidoFormulario"> <div class="input-group"> <span class="input-group-addon"><img src="assets/images/Icono_Usuario.png" class="iconoVentana" /></span> <input id="msg" type="text" class="form-control" name="msg" placeholder="Número de DNI"> </div> <br /> <div class="input-group"> <span class="input-group-addon"><img src="assets/images/Icono_Usuario.png" class="iconoVentana" /></span> <input id="password" type="password" class="form-control" name="password" placeholder="Contraseña"> </div> <p class="textoOlvidoContraseña form-text">¿Olvidaste tu contraseña?</p> <div class="input-group"> <span class="input-group-addon iconoVentana"></span> <button type="submit" class="btn btn-primary form-control btnIngreso">INGRESAR</button> </div> <br /> </div> <p class="textoEsperaDeposito form-text">Tiempos estimados de espera: BCP, Interbank y BBVA: 20 minutos | Interbancario: 48 horas del dia útil</p> </form> </div > <div > </div> <div > </div> <div class ="rayavertical" > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div > </div> <div class="simboloreloj"> <!-- <img src="assets/images/Icono_Reloj.png" class="imagensimbolo" /> Hola que tal --> </div> <footer class="footer"> </footer> </div> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/popper.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> and this css code using css-grid @font-face { font-family: "Open Sans"; src: url("assets/fonts/OpenSans-Bold.ttf") format("ttf"), url("assets/fonts/OpenSans-BoldItalic.ttf") format("ttf"), url("assets/fonts/OpenSans-ExtraBold.ttf") format("ttf"), url("assets/fonts/OpenSans-ExtraBoldItalic.ttf") format("ttf"); } @font-face { font-family: "Dosis"; src: url("assets/fonts/Dosis-Bold.otf") format("otf"), url("assets/fonts/Dosis-ExtraBold.otf") format("otf"), url("assets/fonts/Dosis-ExtraLight.otf") format("otf"), url("assets/fonts/Dosis-Regular.otf") format("otf"); } body{ background-image: url('assets/images/background.jpg'); font-family: Open Sans; } .container{ display: grid; /* grid-template-columns: 15% 2% 66% 2% 15%; */ grid-template-columns: 19% 1% 59% 1% 20%; grid-template-rows: 15% auto 7% 400px 15% auto; } .imagenLogo { width: 140px; height: 80px; /* float: right;*/ clear: right; margin-top: 12px; } header, footer{ grid-column-start: 1; grid-column-end: 2; } header{ grid-row-start: 2; grid-row-start: 2; } .tituloPagina{ grid-column: 3; grid-row: 2; display: grid; grid-template-columns: auto; grid-template-rows: 10px auto 80px; } .textoTituloPagina{ grid-column: 1; grid-row: 2; color: white; float: none; text-align: left; font-weight: bold; font-size: xx-large; font-stretch: extra-expanded; vertical-align: middle; } .main{ grid-column: 3; grid-row: 4; } /* FORMULARIO */ .frmLogin{ display: grid; grid-template-columns: 5% 25% 40% 25% 5%; grid-template-rows: 7% 15% 5% 53% 10% 10%; border-radius: 1%; background-color: white; /*height: 350px;*/ width: 550px; } .rayavertical{ background-color: white; } .tituloFrmLogin{ grid-row: 2; grid-column-start: 1; grid-column-end: 6; color : #3B7DB9; text-align: center; font-weight: bold; font-size: x-large; font-stretch: ultra-expanded; } .iconoVentana{ width: 32px; height: 32px; margin-right: 5px; margin-top: 2px; } .contenidoFormulario { grid-row: 4; grid-column: 3; } .textoOlvidoContraseña { text-align: center; } .btnIngreso { background-color: #3B7DB9; border-color: #3B7DB9; border-radius: 1%; } .textoEsperaDeposito{ grid-row: 6; grid-column-start: 1; grid-column-end: 6; font-size: 12px; text-align: center; } .imagensimbolo{ width: 40px; height: 40px; } /* .container > div { background-color: white; align-items: start; } */ .simboloreloj{ align-self: start; justify-self: start; /* justify-items: center; */ background-color: white; and i wan to insert a short vertical line beteween the class header and the class Titulopagina as i show below my question is how can i do it?, thank you in advance
×
×
  • Create New...