<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="search-banner text-white py-3 form-arka-plan" id="search-banner"> <div class="container py-5 my-5"> <div class="row text-center pb-4"> <div class="col-md-12"> <h2 class="text-white siyah-cerceve">Kiralık Otobüs Ara, Firmalar, Araçlar</h2> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card acik-renk-form"> <div class="card-body"> <div class="row"> <div class="col-md-4"> <div class="form-group "> <select id="iller" class="form-control" > <option selected>Tüm İller</option> <option>İstanbul</option> <option>Ankara</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group "> <select id="ilceler" class="form-control" > <option selected>Tüm İlçeler</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group "> <select id="arac-turu" class="form-control" > <option selected>Tüm Araç Türleri</option> <option>Otobüs</option> <option>Minibüs</option> <option>Karavan</option> <option>Vito</option> <option>Limuzin</option> </select> </div> </div> </div> <p class="font-weight-light text-dark">ya da</p> <div class="row"> <div class="col-md-9"> <div class="form-group "> <input type="text" class="form-control" placeholder="Firma, şahis, araç ismiyle arayabilirsin"> </div> </div> <div class="col-md-3"> <button type="button" class="btn btn-warning pl-5 pr-5">Ara</button> </div> </div> </div> </div> </div> </div> </div> </section>

.firma-ara{ padding-bottom: 100px; padding-top: 100px; } .form-arka-plan{ background-image: url("https://cdn.filepicker.io/api/file/1WxRtkAQG5h70aoPQdGA/convert?format=jpeg&quality=50"); background-position: center; background-repeat: no-repeat; background-size: cover; } .acik-renk-form{ background: rgba(255, 255, 255, 0.58); } .siyah-cerceve{ -webkit-text-fill-color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; }