Eu dei uma olhada no seu código e tinham vários detalhes de estrutura no HTML e no CSS também, muitas classes redundantes, e desnecessárias. Algumas delas inclusive como o padding
vc pode usar as classes nativas do Bootstrap nem precisa fazer na mão...
Como foram muitos detalhes não vou descrever todos. Mas basicamente eu coloquei um overflow-x
no body
para pode colocar alguns elementos extrapolando o tamanho da tela, mas não gerar a barra de rolagem horizontal na janela. Isso foi preciso devido o box azul no H1
e a linha azul no P
, nos dois eu criei um elemento ::after
para criar os elementos azul.
Veja o código como ficou. Vc precisa ainda tratar a responsividade pare ajustar em telas pequenas ok!
OBS: Exiba como "Página toda" para ver melhor o resultado!
body {
overflow-x: hidden;
}
.bg {
background-image: url(http://unsplash.it/400/250);
background-size: cover;
background-repeat: no-repeat;
}
.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;
}
.saiba p {
color: #fff;
font-size: 1em;
text-align: right;
font-family: Myriad Pro;
position: relative;
}
.saiba p::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 50vw;
height: 3px;
background-color: #1268c2;
}
.container-bloco h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
font-size: 4em;
text-transform: uppercase;
line-height: 1.1em;
position: relative;
z-index: 1;
}
.container-bloco h1::after {
content: "";
position: absolute;
top: -20%;
right: 50px;
width: 50vw;
height: 140%;
background-color: rgba(18, 104, 194, 0.5);
z-index: -1;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="container bg">
<div class="row">
<div class="col-md-6 text-right pr-5 py-5 container-bloco">
<h1>O que<br> busca<br>mos</h1>
</div>
<div class="col-md-3 offset-md-3 text-right py-5 align-self-end saiba">
<p>Gerar oportunidades para que pessoas e organizações conquistem seus objetivos com satisfação e felicidade.</p>
<button type="button" class="btn btn-primary">SAIBA ONDE ATUAMOS</button>
</div>
</div>
</div>