Multi-color background

Asked

Viewed 326 times

0

I need to make a responsive web page with bootstrap 4. Having in the middle of the page a purple region ( HEX #A544A7).

I tried with linear-gradient, but it got degraded and that’s not what I need.

What I wish for. inserir a descrição da imagem aqui

What I have developed.

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>

My biggest question is: How do I make this region purple? Background or a division (div)?

css3 twitter-bootstrap

1 answer

1


You can do it using linear-gradient or a div positioned behind the elements.

To do with gradient, you need to put twice each color indicating where it starts and ends. The gradient I used was:

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

The first parameter is to indicate the orientation of the gradient (in this case, vertical). Next comes the color ranges: white goes from 0% à 41.4%, purple goes from 41.4% until 58.85% and finally white again 58.85% to the end.

Note that these measurements are relative to the size of the page and that depending on the size of the screen, this can be a problem. Therefore, the ideal is for you to use a div below the content elements, and you can use z-index and position:absolute to position it.

Follow the example using the gradient I mentioned (here it is perfect, but as I said earlier, it may give problem depending on the size of the screen). Then I present a version using 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>

To use a div, just position it using position: absolute; and apply some value of z-index the elements which must overlap with that div. It is important to emphasize that to apply z-index to an element he needs to have position equal to relative, absolute, fixed or sticky. By default html elements have position: static;.

Follow an example using a div positioned behind:

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>

  • Show, using the div became straight. I only used in class .faixa the left in 0px.

  • Using the gradient until it was right here, but probably gives problems on screens with different sizes, which is what I tried to explain in the text. Really with left: 0 looks better.

Browser other questions tagged css3 twitter-bootstrap

You are not signed in. Login or sign up in order to post.