0

Eu preciso fazer uma página web responsiva com bootstrap 4. Tendo no meio da página uma região roxa ( HEX #A544A7).

Tentei com linear-gradient, mas ficou degradê e não é isso que eu preciso.

O que eu desejo. inserir a descrição da imagem aqui

O que eu desenvolvi.

body {
    background: #471D6C;
}

.conteudo {
    background-color: white;
    border-radius: 30px;

    height: 100%;
    margin-top: 60px;
}

.part1{
    padding-top: 58px;
    padding-left: 77px;
}

.logo {
    width: 180px;
    height: 116.7px;
}

.conheca {
    width: 324px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;

    line-height: 24px;
    color: #424247;
}

.botao-alaranjado {
    background-color: #EBB029;
    border-radius: 10px;
    width: 80%;
}

h2 {
    
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;

    text-align: left;
    width: 324px;
    color: #424247;
    line-height: 35px;
    
}
<html>
    <head>
        <title>Teste</title>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="css/index.css" rel="stylesheet" />
    </head>
    <body>
    
        <div class="container align-items-center conteudo">
            
            <div class="part1">
                <div class="row row-eq-height">
                    <div class="col-6">
                        <div class="row">
                            <div class="logo">
                                LOGO AQUI
                            </div>
                        </div>
                        <div class="row">
                            <label>texto random. texto random!</label>
                        </div>
                        <div class="row">
                            <h2>TEXTO TITULO</h2>
                        </div>
                        <div class="row">
                            <label class="conheca">texto random texto random!</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="imagem-cliente">
                            <div class="imagem-homem">
                                <img src="https://i.ibb.co/6Wh3FMR/homem.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="part2">
                <div class="row row-eq-height">
                    <div class="col-6">
                        
                        <img src="https://i.ibb.co/2vc40mY/smartphone.png" />
                            
                            
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <label>Texto informativo</label>
                        </div>
                        <div class="row">
                            <button class="btn botao-alaranjado">BOTAO</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="part3">

            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        
    </body>
</html>

Minha maior dúvida é: Como faço essa região roxa? Background ou uma divisão (div)?

1 Resposta 1

1

Dá para fazer usando linear-gradient ou uma div posicionada atrás dos elementos.

Para fazer com gradiente, você precisa colocar duas vezes cada cor, indicando onde ela começa e termina. O gradiente que usei foi:

background: linear-gradient(180deg, #fff 0%, #fff 41.4%, #A444A6 41.4%, #A444A6 58.85%, #fff 58.85%, #fff 100%);

O primeiro parâmetro é para indicar a orientação do gradiente (no caso, vertical). Em seguida vem os intervalos das cores: branco vai de 0% à 41.4%, roxo vai de 41.4% até 58.85% e por fim branco novamente de 58.85% até o final.

Observe que essas medidas são relativas ao tamanho da página e que, dependendo do tamanho da tela, pode dar problema. Por isso, o ideal é você usar uma div por baixo dos elementos do conteúdo, e você pode usar z-index e position:absolute para posicioná-la.

Segue o exemplo usando o gradiente que citei (aqui está perfeito, mas como falei anteriormente, pode dar problema dependendo do tamanho da tela). Depois apresento uma versão usando div.

body {
    background: #471D6C;
}

.conteudo {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, #fff 0%, #fff 41.4%, #A444A6 41.4%, #A444A6 58.85%, #fff 58.85%, #fff 100%);
    border-radius: 30px;
    height: 100%;
    margin-top: 60px;
}

.part1{
    padding-top: 58px;
    padding-left: 77px;
}

.logo {
    width: 180px;
    height: 116.7px;
}

.conheca {
    width: 324px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;

    line-height: 24px;
    color: #424247;
}

.botao-alaranjado {
    background-color: #EBB029;
    border-radius: 10px;
    width: 80%;
}

h2 {
    
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;

    text-align: left;
    width: 324px;
    color: #424247;
    line-height: 35px;
    
}
<html>
    <head>
        <title>Teste</title>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="css/index.css" rel="stylesheet" />
    </head>
    <body>
    
        <div class="container align-items-center conteudo">
            
            <div class="part1">
                <div class="row row-eq-height">
                    <div class="col-6">
                        <div class="row">
                            <div class="logo">
                                LOGO AQUI
                            </div>
                        </div>
                        <div class="row">
                            <label>texto random. texto random!</label>
                        </div>
                        <div class="row">
                            <h2>TEXTO TITULO</h2>
                        </div>
                        <div class="row">
                            <label class="conheca">texto random texto random!</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="imagem-cliente">
                            <div class="imagem-homem">
                                <img src="https://i.ibb.co/6Wh3FMR/homem.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="part2">
                <div class="row row-eq-height">
                    <div class="col-6">
                        
                        <img src="https://i.ibb.co/2vc40mY/smartphone.png" />
                            
                            
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <label>Texto informativo</label>
                        </div>
                        <div class="row">
                            <button class="btn botao-alaranjado">BOTAO</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="part3">

            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        
    </body>
</html>

Para usar uma div, basta posicioná-la usando position: absolute; e aplicar algum valor de z-index aos elementos que devem sobrepor essa div. É importante ressaltar que para aplicar z-index a um elemento ele precisa ter position igual a relative, absolute, fixed ou sticky. Por padrão os elementos html possuem position: static;.

Segue um exemplo usando uma div posicionada atrás:

body {
    background: #471D6C;
}

/* faixa com cor roxa */
.faixa {
  background-color: #A444A6;
  position: absolute;
  height: 113px;
  left: 0;
  margin-top: -19px;
  width: 100%;
  z-index: 0;
}

/* posicionando os elementos por cima da div .faixa */
.imagem-homem, .imagem-telefone, .part1 {
  position: relative;
  z-index: 5;
}

.conteudo {
    background: #fff;
    border-radius: 30px;
    height: 100%;
    margin-top: 60px;
    position: relative;
}

.part1{
    padding-top: 58px;
    padding-left: 77px;
}

.logo {
    width: 180px;
    height: 116.7px;
}

.conheca {
    width: 324px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;

    line-height: 24px;
    color: #424247;
}

.botao-alaranjado {
    background-color: #EBB029;
    border-radius: 10px;
    width: 80%;
}

h2 {
    
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;

    text-align: left;
    width: 324px;
    color: #424247;
    line-height: 35px;
    
}
<html>
    <head>
        <title>Teste</title>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="css/index.css" rel="stylesheet" />
    </head>
    <body>
    
        <div class="container align-items-center conteudo">
            <div class="part1">
                <div class="row row-eq-height">
                    <div class="col-6">
                        <div class="row">
                            <div class="logo">
                                LOGO AQUI
                            </div>
                        </div>
                        <div class="row">
                            <label>texto random. texto random!</label>
                        </div>
                        <div class="row">
                            <h2>TEXTO TITULO</h2>
                        </div>
                        <div class="row">
                            <label class="conheca">texto random texto random!</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="imagem-cliente">
                            <div class="imagem-homem">
                                <img src="https://i.ibb.co/6Wh3FMR/homem.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="faixa"></div>
            <div class="part2">
                <div class="row row-eq-height">
                    <div class="col-6">
                        
                        <img class="imagem-telefone" src="https://i.ibb.co/2vc40mY/smartphone.png" />
                            
                            
                    </div>
                    <div class="col-6">
                        <div class="row">
                            <label>Texto informativo</label>
                        </div>
                        <div class="row">
                            <button class="btn botao-alaranjado">BOTAO</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="part3">

            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        
    </body>
</html>

2
  • Show, utilizando a div ficou certinho. Apenas usei na classe .faixa o left em 0px. 4/05/2019 às 2:37
  • Usando o gradiente até que ficou certinho aqui, mas provavelmente dá problemas em telas com tamanhos diferentes, que foi o que tentei explicar no texto. Realmente com left: 0 fica melhor. 4/05/2019 às 2:39

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 .