Difficulties with responsiveness for complex layout

Question

Good afternoon, all good?

I have a doubt, if it takes a lot of work, do not even need to do, just give me a light, because I believe I’m not making this layout the best way to be responsive and I’m having many problems at work.

The layout is basically this below:

I’m wearing bootstrap 4 and I’m having a hard time making this blue floating square, could you tell me if I’m doing it right, or if there’s any way I can improve it to make it more semantic? Thank you.

Follow my html and 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;
}

If someone has advanced knowledge of hmtl and css and can give me an idea, or help me with something, I deeply appreciate.

Answer 1

I took a look at their code and they had a lot of structure details in HTML and CSS too, lots of redundant, unnecessary classes. Some of them including as the padding you can use the native Bootstrap classes or need to do it by hand...

As were many details I will not describe all. But basically I put a overflow-x in the body to put some elements extrapolating the screen size, but not generating the horizontal scrollbar in the window. That was necessary due to the blue box on H1 and the blue line on P, both I created an element ::after to create the blue elements.

See the code as it turned out. You still need to treat the responsiveness to adjust on small screens ok!

OBS: Display as "Whole Page" to see the result better!

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>