How can i put a vertical line in a grid

Luis Martin · October 28, 2020

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

imagen.png.5ebe0dfcaad43e31cea72bb806ad82e5.png

Sign In

How can i put a vertical line in a grid

Recommended Posts

Luis Martin

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity