Skip to main content
correção de código
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
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;1000px;
    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;1000px;
    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<p class="text-center text-md-right">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>
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>
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: 1000px;
    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: 1000px;
    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 py-5 align-self-end saiba">
            <p class="text-center text-md-right">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>
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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>