I want to create an almost identical index, I'm using bootstrap to do it, I run into the beginning of the site, since I can not place the two Divs that contain text and form, occupy 50% of the site with width but when I want that occupy 100% of height does not do it, on twitter I saw that no matter how much you zoom out is always occupying 100% of Height.
I have seen that they use Flexbox in some divs, I have tried to copy exactly but it does not work for me.
.izquierdo {
background-color: #449dd1;
}
.derecho {
background-color: #78c0e0;
}
.pie {
background-color: white;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
border-top: 1px solid #e6ecf0;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<!-- Etiqueta para responsive -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- Hoja de estilos de bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="estilos.css">
<title></title>
</head>
<body>
<!-- Este es todo el contenido -->
<div class="container-fluid">
<section class="main row">
<!-- Es donde se encuentra el fondo de la pàgina el lado izquierdo -->
<div class="izquierdo col-md-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et dolorem libero corrupti, ea expedita ex est laudantium minus ad, magnam asperiores, velit quasi nostrum, cumque sequi nam assumenda dignissimos quo.
</div>
<!-- Es donde se encuentra el login -->
<div class="derecho col-md-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quas cupiditate quia ad quisquam, autem recusandae facere distinctio! Sint quibusdam nisi quis non dignissimos soluta voluptatum impedit consectetur quasi corporis.
</div>
</section>
</div>
<!-- Es el pie de pàgina no tendra casi nada pero bue -->
<footer class="pie">
</footer>
<!-- El pinche jquery -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
</body>
</html>