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 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)?