0

Buenas quisiera que me puedan ayudar estoy realizando un formulario quisiera la mitad de mi pantalla se pinte de color amarillo y con ese logo en el medio. y la otra mitad como esta , y quisiera realizar responsive. Estoy realizando con boostrap 4 y css , html

Adjunto mi HTML.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
<link href="../Css/Login.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
          <div class="row">
              <div class="col-6" id="Izquierda">
                  <center>
                       <img src="../img/LOGOOOO.png" width="250px" class="text-center" id="imgen"/>
                  </center>

              </div>
              <div class="col-6" id="Derecha">
                  <h3 class="font-weight-light">Financiera QapaQ S.A</h3> <br />
                  <table class="table">
                      <tr>
                          <th class="font-weight-light">Username :</th>
                          <th>
                              <asp:TextBox ID="txtusername" CssClass="form-control" runat="server"></asp:TextBox></th>
                      </tr>
                      <tr>
                          <th class="font-weight-light">Password :</th>
                          <th>
                              <asp:TextBox ID="txtllave" CssClass="form-control" TextMode="Password" runat="server"></asp:TextBox></th>
                      </tr>
                      <tr>
                          <th>
                              <asp:Button ID="btnIngresar" runat="server" Text="Ingresar" CssClass="alert alert-primary" /></th>
                      </tr>
                  </table>
              </div>
          </div>
    </div>
    </form>

Ajunto mi CSS

#Derecha
    {
        margin-top:165px;

    }
    #Izquierda
    {
        padding:25%;
        background:#f7e92f;
        /*background:#085075;*/
        text-align:center;
            padding-left: 150px;
    }

Imagen que me sale.

[![introducir la descripción de la imagen aquí][1]][1]

[![introducir la descripción de la imagen aquí][2]][2]

/************************/

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
<link href="../Css/Login.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <title></title>
    <style>
        .color2{background:#fcc314;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<section class="container-fluid" id="Formulario">
          <h3 class="text-uppercase text-center"> Formulario de contacto</h3>

            <div class="row ">
               <div class="col-6">
                   <form action="" > 
                        <div class="form-group ">
                            <label for="" >Nombre</label>
                            <input type="text"  placeholder="Escribe tu nombre aquí" class="form-control">
                        </div>
                        <div class="form-group">
                                <label for="" >Email</label>
                                <input type="text" placeholder="Escribe tu email" class="form-control">
                            </div>

                            <div class="form-group d-flex flex-row justify-content-center">
                                <button class="btn btn-danger ">Enviar</button>
                            </div>
                    </form>
                </div>
                <div class="col-6 color2  d-flex justify-content-center align-items-center">

                    <img class="img-fluid" src="../img/LOGOOOO.png" id="imgen" alt="">

                 </div>   
            </div>
        </section>
    </div>
    </form>
</body>
3
  • Amigo quieres que te muestre en la primera mitad tu cuadro de color amarillo y la otra tu formulario pero que cubra todo la pantalla con esos dos? Commented el 11 ago. 2018 a las 15:56
  • @DiegosSánchez si hermano la mitad todo del amarillo con el logo medio y la otra mitad el formulario
    – PieroDev
    Commented el 11 ago. 2018 a las 16:01
  • ok amigo esperame voy a editar mi respuesta y te muestra una captura. Commented el 11 ago. 2018 a las 17:32

2 respuestas 2

1

Amigo necesitas un curso, te recomiendo esta página https://edutin.com/university hay puedes tomarlo de bootstrap 4 jejeje es fácil pero debes aprender las clases ya que el truco que te falta es controlar las filas y columnas si realmente estas usando bootstrap 4 el truco esta aquí la rejilla que brinda bootstrap esta compuesta por 12 columnas class="col-12" es decir puedes poner una fila y después las columnas que quieras es cómo se dividirá tu pantalla. Aquí un ejemplo amigo, espero y es esto a lo que te refieres: Amigo esto es lo que buscas???

<!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
    <link href="../Css/Login.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <title></title>
    
    <style>
          .color2{background:#fcc314;}
          .slider{
          /* background: url("../img/Chivacola.jpg"); */
          /* Ocupara toda la altura disponible */
          height: 100vh;
          /* La imagen de adapte al tamaño del despoditivo */
          background-size: cover;
          /* La imagen estara centrada */
          background-position: center;
      }
    </style>
    
    </head>
    
    <body>
          <div class="container-fluid">
        
        <div class="row ">
           
            <div class="col-6">
                    <form action="" > 
                         <div class="form-group ">
                             <label for="" >Nombre</label>
                             <input type="text"  placeholder="Escribe tu nombre aquí" class="form-control">
                         </div>
                         <div class="form-group">
                                 <label for="" >Email</label>
                                 <input type="text" placeholder="Escribe tu email" class="form-control">
                             </div>
                            
                             <div class="form-group d-flex flex-row justify-content-center">
                                 <button class="btn btn-danger ">Enviar</button>
                             </div>
                     </form>
                 </div>
                 <div class="col-6 color2 d-flex justify-content-center align-items-center slider">
                     <!-- Imagen fija no crece ni disminuye -->
                     <!-- <img src="../img/palomitas.jpg" width="100px" height="100px" alt=""> -->
                     <!-- Imagen crece y disminuye conforme sea la pantalla de grande -->
                     <img class="img-fluid" src="../img/palomitas.jpg" alt="">
                    
                  </div> 
                
        </div> 
     </div>
    </body>

Captura toda la pantalla, también la puedas usar como imagen de fondo.

introducir la descripción de la imagen aquí

8
  • Sanchez no se pinta el color
    – PieroDev
    Commented el 11 ago. 2018 a las 17:10
  • Amigo esa clase color es mia, no de bootstrap pon la tuya jejeje ok te la paso: .color2{background:#fcc314;} Commented el 11 ago. 2018 a las 17:18
  • Sanchez solo se pinta esa parte de la imagen no se pinta la mitad. adjunto la imagen en mi pregunta
    – PieroDev
    Commented el 11 ago. 2018 a las 17:19
  • Sanchez ahi coloque como esta mi codigo
    – PieroDev
    Commented el 11 ago. 2018 a las 17:21
  • Amigo aclaro que todo es responsivo. pruebalo en modo celular. Commented el 11 ago. 2018 a las 17:41
0

para empezar quita los en donde tienes la imagen, para que te quede algo asi, segundo en el row pon esta ionstruccion: justify-content-around para que te los ponga en linea, y si estas usando bootstrap entonces pon las medidas con las instrucciones de bootstrap, te dejo un video que yo vi para que lo puedas hacer, en ese video explican todo nuy bien: https://www.youtube.com/watch?v=-83eiJ9EaD4

espero que te ayude, lo primero que te comente, es como yo le hice para que me funcionara a mi, pero como que no me explique bien, por eso te pongo el video

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.