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>