<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"><div class="well well-sm mt-15 strait-16" style="margin-top:20px;background-color:black;color:#fff;border-radius: 7px"> <center><strong id="kayitSayisi">61 Adet kayıt var</strong></center> </div> <ul class="media-list main-list"> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" id="img-shadow" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKNBJvo2neN7WWJuW0U5UJyI4d4W7qWENpMX-pcmxNi8iXll3xPHYw464lC0iD9yZfxV3L66VRlJJB_IO-Xy0cqfzgeJOP9vK1ROXwZDtqr4XXfidnTJcxIVDXkm6_tSz4eHR4Vlpg-ox7t3YapADcb3F0AZ2B7H2CKeyDjmCDSiRS3nCmYw-SZuS8uwB/s1600/yapikredi.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem1" class="media-heading">62- Emeklilerin Türkiye şartlarında hayatta kalma mücadeleleri</h4> <div class="media-body"> <h6 id="listitem1" class="media-heading text-danger">Emeklilerin Türkiye şartlarında hayatta kalma mücadeleleri</h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/oyak-kulliyede-bilgilendirme.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/oyak-kulliyede-bilgilendirme.html</b></a></p> </div> </div> <div id="satır" class="clearfix btn-group-sm" style="width: 100%;padding-top: 10px"> <div class="pull-left "> <a href="#" class="btn btn-default btn-xs clgreen"><b><span class="glyphicon glyphicon-thumbs-up"></span> 35</b></a> <a href="#" class="btn btn-default btn-xs clred"><b><span class="glyphicon glyphicon-thumbs-down"></span> 25</b></a> <a href="#" class="btn btn-default btn-xs"><b><span class="glyphicon glyphicon-eye-open"></span> 12</b></a> <a href="#" class="btn btn-default btn-xs"><b><span class="glyphicon glyphicon-time"></span> 25 Ocak 2024 18:00</b></a> </div><!-- soldaki butonlar --> <div class="pull-right "> <button id="kayitGeriyukle" lang="26" class="btn btn-success sagbosluk">Geri yükle <span class="glyphicon glyphicon-refresh"></span></button> <a href="#" class="btn btn-danger sagbosluk" id="kayitEdit" > Sil <span class="glyphicon glyphicon-trash"></span></a> <a href="#" class="btn btn-primary" id="kayitDelete" > Düzenle <span class="glyphicon glyphicon-edit"></span></a> <a href="#" class="btn btn-info clblack" id="kayitDelete" > Bildirim Gönder <span class="glyphicon glyphicon-phone"></span></a> </div><!-- sağdaki butonlar --> </div><!-- satır --> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" id="img-shadow1" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKNBJvo2neN7WWJuW0U5UJyI4d4W7qWENpMX-pcmxNi8iXll3xPHYw464lC0iD9yZfxV3L66VRlJJB_IO-Xy0cqfzgeJOP9vK1ROXwZDtqr4XXfidnTJcxIVDXkm6_tSz4eHR4Vlpg-ox7t3YapADcb3F0AZ2B7H2CKeyDjmCDSiRS3nCmYw-SZuS8uwB/s1600/yapikredi.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem" class="media-heading">62- Emeklilerin mekalmek amleak lemka emka emka emake amk mkea maem aemak elmak eamkkema mae aema eamle aea ae eaekk eaeae Türkiye şartlarında hayatta kalma mücadeleleri</h4> <div class="media-body"> <h6 id="listitem" class="media-heading text-danger">Emeklilerin Türkiye şartlarında hayatta kalma mücadeleleri</h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/oyak-kulliyede-bilgilendirme.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/oyak-kulliyede-bilgilendirme.html</b></a></p> </div> </div> <div id="satır" class="clearfix btn-group-sm" style="width: 100%;padding-top: 10px"> <div class="pull-left "> <a href="#" class="btn btn-default btn-xs clgreen"><b><span class="glyphicon glyphicon-thumbs-up"></span> 35</b></a> <a href="#" class="btn btn-default btn-xs clred"><b><span class="glyphicon glyphicon-thumbs-down"></span> 25</b></a> <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span> 12</a> <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-time"></span> 25 Ocak 2024 18:00</a> </div><!-- soldaki butonlar --> <div class="pull-right "> <button id="kayitGeriyukle" lang="26" class="btn btn-success sagbosluk">Geri yükle <span class="glyphicon glyphicon-refresh"></span></button> <a href="#" class="btn btn-danger sagbosluk" id="kayitEdit" > Sil <span class="glyphicon glyphicon-trash"></span></a> <a href="#" class="btn btn-primary" id="kayitDelete" > Düzenle <span class="glyphicon glyphicon-edit"></span></a> </div><!-- sağdaki butonlar --> </div><!-- satır --> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCLmqoYOVYKXD8bbJ964vzjeasD3h1OHuEgLCcIzqZ84DHU_FlClB-QUdPpqV7sTcm9aGyBMeEByAu95tZ5yeukN49WbxeT7kOTIWIo39bwJOWAueBBhx5eTuJ0uaSl8daCeIOSqRYCSEM5mAPtaTsbHXaEpRDQr53TNs-DZT7LNPxNWEYhoJgJms4fajO/s1600/sgk-prom.jpg" alt=""></a> <div class="media-body"> <h4 id="listitem1" class="media-heading">62- Emeklilerin Türkiye şartlarında hayatta kalma mücadeleleri</h4> <div class="media-body"> <h6 id="listitem1" class="media-heading text-danger">Emeklilerin Türkiye şartlarında hayatta kalma mücadeleleri</h6> <div class="by-author"> <p id="listitem" class="by-author"><a href="https://oyakbilgi.blogspot.com/p/oyak-kulliyede-bilgilendirme.html" target="_blank"><b>https://oyakbilgi.blogspot.com/p/oyak-kulliyede-bilgilendirme.html</b></a></p> </div> </div> <div id="satır" class="clearfix btn-group-sm" style="width: 100%;padding-top: 10px"> <div class="pull-left "> <a href="#" class="btn btn-default btn-xs clgreen"><b><span class="glyphicon glyphicon-thumbs-up"></span> 35</b></a> <a href="#" class="btn btn-default btn-xs clred"><b><span class="glyphicon glyphicon-thumbs-down"></span> 25</b></a> <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span> 12</a> <a href="#" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-time"></span> 25 Ocak 2024 18:00</a> </div><!-- soldaki butonlar --> <div class="pull-right "> <button id="kayitGeriyukle" lang="26" class="btn btn-success sagbosluk">Geri yükle <span class="glyphicon glyphicon-refresh"></span></button> <a href="#" class="btn btn-danger sagbosluk" id="kayitEdit" > Sil <span class="glyphicon glyphicon-trash"></span></a> <a href="#" class="btn btn-primary" id="kayitDelete" > Düzenle <span class="glyphicon glyphicon-edit"></span></a> </div><!-- sağdaki butonlar --> </div><!-- satır --> </div><!-- media-body --> </li> </ul> </div> </div>

/* list item Restriction. */ .main-list { padding-left: .5em; } .main-list .media { /* margin-top: 20px; */ padding-bottom: 1.1em; border-bottom: 1px solid #3C3C3C; } .main-list .media:first-child { /* border-top: 2px solid blue;*/ padding-top:15px; } .main-list .media:last-child { /*border: none;*/ border-bottom: 1px solid #D6D6D6; } /* Style to article Author */ .by-author { font-size: 12px; color: #000; padding:0; margin:0; } .sagbosluk { margin-right: 7px; } .clred { color:red; } .clgreen { color:darkgreen; } .clblack { color:#000; } /* 2 satır ise tek satır yapıp sonuna ... koyuyor */ #listitem { overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 1; /* 2 satır ise tek satır yapabilirsin */ -webkit-box-orient: vertical; } #img-shadow { /* 0px yatay, 6px dikey, 12px yayılma, %15 şeffaflık */ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Geçiş efekti ekleyerek daha modern bir görünüm sağlayabiliriz (örneğin hover için) */ transition: box-shadow 0.3s ease-in-out; } #img-shadow1 { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Daha koyu ve keskin gölge */ border: 1px solid #ccc !important; /* Çerçevenin rengini de hafifçe yumuşatmak isteyebilirsiniz */ }