<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="profil py-5 "> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="slider"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div style=" border-radius: 0.25rem;" class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" style="height: 290px" src="http://i2.haber7.net//haber/haber7/photos/2017/42/yerli_elektrikli_otobus_sileo_gorucuye_cikti_1508579280_0003.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" style="height: 290px" src="https://plusfly.com/wp-content/uploads/2017/08/kamilkoc-otobus-bileti.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" style="height: 290px" src="https://www.biletbayi.com/Content/ContentItemDocument/images/manload/pamukkale-otobus.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="olanaklar-kutu"> <div class="olanaklar"> <h4 class="pb-3">Olanaklar</h4> <ul class="yacht-info__list "> <li> <img src="https://img.icons8.com/metro/1600/home.png" class="arac-icon" alt="Kiwi standing on oval"> <span class="vertical-align-mid">İstanbul</span> </li> <li> <img src="https://img.icons8.com/metro/1600/home.png" class="arac-icon" alt="Kiwi standing on oval"> <span class="vertical-align-mid">35-56</span> </li> <li> <img src="https://img.icons8.com/metro/1600/home.png" class="arac-icon" alt="Kiwi standing on oval"> <span class="vertical-align-mid">klima </span> </li> <li> <img src="https://img.icons8.com/metro/1600/home.png" class="arac-icon" alt="Kiwi standing on oval"> <span class="vertical-align-mid">Tv </span> </li> <li> <img src="https://img.icons8.com/metro/1600/home.png" class="arac-icon" alt="Kiwi standing on oval"> <span class="vertical-align-mid">wifi</span> </li> <li> <img src="https://img.icons8.com/metro/1600/home.png" class="arac-icon" alt="Kiwi standing on oval"> <span class="vertical-align-mid">Bagaj</span> </li> <li> <img src="https://img.icons8.com/metro/1600/home.png" class="arac-icon" alt="Kiwi standing on oval"> <span class="vertical-align-mid">Prij</span> </li> <li> <img src="https://img.icons8.com/metro/1600/home.png" class="arac-icon" alt="Kiwi standing on oval"> <span class="vertical-align-mid">Tuvalet</span> </li> </ul> </div> <div class="olanaklar margin-top--22"> <h4 class="pb-3">Hakkında</h4> <p>Fethiye'nin turkuaz ve dingin sularında muhteşem bir hafta gerçekleştirebilirsiniz. Kiralık yat ile bu doğal güzelliklere yakından şahitlik edebilirsiniz. 5 kabinli kiralık yelkenlimiz ile sizi Fethiye ve Göcek'in muhteşem koylarında keyifli bir seyahate çıkartıyoruz.</p> </div> </div> </div> <div class="col-md-4"> <div class="card"></div> <img class="card-img-top" src="https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg" alt="Card image cap"> <div class="card-body text-center "> <span class="badge badge-warning">Ali Bulut</span> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a style="display: grid; background-image: -webkit-linear-gradient(0deg, #FF9800 0%, #F44336 100%); " href="talep-olustur.html" class="primary-btn2 header-btn text-uppercase text-center">Mesaj At</a> </div> </div> </div> </div> </div> </section>

.profil{ background: #f9f9f9; } .profil .yacht-info__list li { width:25%; } .olanaklar-kutu{ background: #fff; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.125); overflow: hidden; float: left; width: 100%; margin: 15px 0px; } .olanaklar{ float: left; width: 100%; position: relative; padding: 25px 30px 30px; } .margin-top--22{ margin-top:-22px; } .olanaklar-kutu h4{ color: #FF9800; } .yacht-info__list img{ width:20px; padding-right:5px; } .yacht-info__list { list-style: none; padding: 0; font-size: 16px; } .yacht-info__list li { padding: 6px 0; font-size: 15px; display: table; height: 100%; line-height: 21px; float: left; width: 50%; margin-bottom: 5px; }