I tried to make the code like in the image but with no success. I’m a beginner so plesease guys give me a little help.
CSS
body {
background: #EEEEEE;
}
.vous-voulez {
background-color: #DFE3E4;
}
.vous-voulez-button .btn-success {
color: #fff;
background-color: #023014;
border-color: #fff;
border-width: 3px;
border-radius: 0;
box-shadow: 0px 0px 0 3px #5f5f5f;
}
.vous-voulez-button {
background-color: #DFE3E4;
}
.recherche {
background-color: #DFE3E4;
}
HTML:
<main class="container-fluid">
<div class="home-top-selects container-fluid">
<div class="vous-voulez ">
<div class="row">
<div class="vous-voulez-button col-sm-6">
<h4>Vous voulez vendre votre bien rapidement?</h4>
<button type="button" class="btn btn-success btn-block">Cliquez ici pour une annonce gratuitement!</button>
</div>
<div class="recherche col-sm-6">
<h4>Recherche par numero de telephone</h4>
<form>
<div class="row">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" />
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">CHERCHER</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="text-p">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-9">
<p>Cliquez sur l'une des icones suivantes pour masquer la recherche</p>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="false"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-9">
<p>Aimeriez-vous promouvoir votre actiuvite ou produit? <a href="#">Consultez nos tarifs</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>