1

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:

Layout Avançado

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.

2
  • Qual versão do Bootstrap vc está usando?
    – hugocsl
    Commented 9/09/2018 às 21:24
  • o Bootstrap 4 como citei ali Commented 9/09/2018 às 23:49

1 Resposta 1

0

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: 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>

2
  • eu vou dar uma olhada assim que possível, mas não tem jeito né? eu queria saber se tinha algum jeito pra facilitar no responsivo pra telas menores, mas pelo jeito tem que ser tudo no media queries mesmo, é isso? Commented 10/09/2018 às 14:25
  • @DouglasLima Alguns ajustes simples vc vai precisar fazer com os media queri sim se quiser que fique idêntico, mas é coisa pouca. Pq no mais vc pode usar as classes nativas do Bootstrap 4. Da uma olhada na documentação oficial que tem muita coisa lá que vai te ajudar getbootstrap.com/docs/4.1/utilities Já até fiz um pequeno ajuste nos elemento em azul para ter a medida fixa em pixel e para o texto centralizar em telas pequenas, mas na grande fica alinhado a direita. Falta muito pouco pra ficar do jeito que vc quer. Tenta dar uma mexida e se tiver alguma dúvida fala ai que te ajudo
    – hugocsl
    Commented 10/09/2018 às 14:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .