Boa tarde, tudo bom?
Eu estou com uma duvida, se der muito trabalho, não precisam nem fazer, apenas me deêm uma luz, pois creio que não estou fazendo esse layout do melhor jeito para ficar responsivo e estou tendo muitos problemas no trabalho.
O layout é basicamente esse abaixo:
Estou usando bootstrap 4 e estou com dificuldades para fazer esse quadrado azul flutuante, poderiam me dizer se estou fazendo do jeito certo, ou se tem como melhorar pra deixar mais semântico? Obrigado.
Segue meu html e css:
<section id=oquebuscamos>
<div class="row sessao1">
<div class="container-bloco col-md-4">
<h1>O que<br> busca<br>mos</h1>
<div class="bloco">
</div>
</div>
<div class="descricao col-md-4 offset-md-8" style="padding-left:0">
<div class="col-md-6">
<p>Gerar oportunidades para que pessoas e organizações conquistem seus objetivos com satisfação e
felicidade.
</p>
</div>
</div>
<div class="saiba col-md-3 offset-md-7">
<button type="button" class="btn btn-primary">SAIBA ONDE ATUAMOS</button>
</div>
<div class="conteudo col-md-8 offset-md-2">
<img src="images/oquebuscamos.png">
</div>
</div>
</section>
CSS:
.conteudo {
margin-top: 2em;
}
.quadrado1 {
position: absolute;
margin-top: 6vw;
margin-left: 4vw;
}
.container-bloco {
width: 100%;
height: 65%;
margin-top: 8%;
margin-left: 5%;
position: absolute;
z-index: 999;
}
.bloco {
width: 100%;
height: 100%;
opacity: 0.7;
background-color: #1268c2;
}
.container-bloco h1 {
padding-top: 50px;
padding-left: 5em;
padding-right: 0;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
font-size: 4em;
text-transform: uppercase;
z-index: 99;
text-align: right;
width: 100%;
line-height: 1.1em;
}
.descricao {
width: 100%;
position: absolute;
z-index: 99;
margin-top: 20%;
margin-right: 10%;
border-bottom: 4px solid #3f7cbc;
}
.descricao p {
color: #fff;
font-size: 1em;
z-index: 99;
text-align: right;
font-family: Myriad Pro;
}
.saiba {
position: absolute;
margin-top: 30%;
z-index: 99;
text-align: center;
}
.saiba button {
background-color: transparent;
border: 1px solid #fff;
font-family: Myriad Pro;
letter-spacing: 1px;
padding-top: 2%;
width: 100%;
height: 50px;
border-radius: 0;
}
.saiba button:hover {
background-color: #1268c2;
color: #fff;
}
Se alguém possuir conhecimentos avançados de hmtl e css e puder me dar uma ideia, ou me ajudar em algo, agradeço profundamente.