<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-shadow1" width="100px" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""></a> <div class="media-body"> <h4 id="listitem" class="media-heading"> <button type="button" class="btn btn-sm btn-default"><b>mema4@gmail.com</b></button> </h4> <div class="media-body"> <button type="button" class="btn btn-xs btn-danger darkmod">Kayıt : <span class="badge">12.12.1988</span></button> <button type="button" class="btn btn-xs btn-danger darkmod">Son erişim <span class="badge">12.12.1988</span></button> <button type="button" class="btn btn-xs btn-primary darkmod">Kullanma Sayısı <span class="badge">2527</span></button> <button type="button" class="btn btn-xs btn-primary darkred">Android Ver. <span class="badge">7.2.3</span></button> <button type="button" class="btn btn-xs btn-danger darkred">Android API. <span class="badge">35</span></button> <button type="button" class="btn btn-xs btn-danger darkred">Telefon Marka <span class="badge">Samsung</span></button> <button type="button" class="btn btn-xs btn-primary darkred">Telefon Model <span class="badge">SCG02</span></button> <button type="button" class="btn btn-xs btn-primary darkahve">Telefon IP <span class="badge">123.2344.223.12</span></button> <button type="button" class="btn btn-xs btn-danger darkahve">Ülke <span class="badge">Türkiye</span></button> </div> <ul class="pager"> <li class="next"> <a href="#" class="btn btn-danger btn-lg" id="kayitEdit" >Mail Gönder <span class="glyphicon glyphicon-envelope" style="margin: 0 10px"></span></a> </li> </ul> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" id="img-shadow1" width="100px" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""></a> <div class="media-body"> <h4 id="listitem" class="media-heading"> <button type="button" class="btn btn-sm btn-default"><b>mema3@gmail.com</b></button> </h4> <div class="media-body"> <button type="button" class="btn btn-xs btn-danger darkmod">Kayıt : <span class="badge">12.12.1988</span></button> <button type="button" class="btn btn-xs btn-danger darkmod">Son erişim <span class="badge">12.12.1988</span></button> <button type="button" class="btn btn-xs btn-primary darkmod">Kullanma Sayısı <span class="badge">2527</span></button> <button type="button" class="btn btn-xs btn-primary darkred">Android Ver. <span class="badge">7.2.3</span></button> <button type="button" class="btn btn-xs btn-danger darkred">Android API. <span class="badge">35</span></button> <button type="button" class="btn btn-xs btn-danger darkred">Telefon Marka <span class="badge">Samsung</span></button> <button type="button" class="btn btn-xs btn-primary darkred">Telefon Model <span class="badge">SCG02</span></button> <button type="button" class="btn btn-xs btn-primary darkahve">Telefon IP <span class="badge">123.2344.223.12</span></button> <button type="button" class="btn btn-xs btn-danger darkahve">Ülke <span class="badge">Türkiye</span></button> </div> <ul class="pager"> <li class="next"> <a href="#" class="btn btn-danger btn-lg" id="kayitEdit" >Mail Gönder <span class="glyphicon glyphicon-envelope" style="margin: 0 10px"></span></a> </li> </ul> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" id="img-shadow1" width="100px" src="https://bootdey.com/img/Content/avatar/avatar3.png" alt=""></a> <div class="media-body"> <h4 id="listitem" class="media-heading"> <button type="button" class="btn btn-sm btn-default"><b>mema1@gmail.com</b></button> </h4> <div class="media-body"> <button type="button" class="btn btn-xs btn-danger darkmod">Kayıt : <span class="badge">12.12.1988</span></button> <button type="button" class="btn btn-xs btn-danger darkmod">Son erişim <span class="badge">12.12.1988</span></button> <button type="button" class="btn btn-xs btn-primary darkmod">Kullanma Sayısı <span class="badge">2527</span></button> <button type="button" class="btn btn-xs btn-primary darkred">Android Ver. <span class="badge">7.2.3</span></button> <button type="button" class="btn btn-xs btn-danger darkred">Android API. <span class="badge">35</span></button> <button type="button" class="btn btn-xs btn-danger darkred">Telefon Marka <span class="badge">Samsung</span></button> <button type="button" class="btn btn-xs btn-primary darkred">Telefon Model <span class="badge">SCG02</span></button> <button type="button" class="btn btn-xs btn-primary darkahve">Telefon IP <span class="badge">123.2344.223.12</span></button> <button type="button" class="btn btn-xs btn-danger darkahve">Ülke <span class="badge">Türkiye</span></button> </div> <ul class="pager"> <li class="next"> <a href="#" class="btn btn-danger btn-lg" id="kayitEdit" >Mail Gönder <span class="glyphicon glyphicon-envelope" style="margin: 0 10px"></span></a> </li> </ul> </div><!-- media-body --> </li> <li class="media"> <a class="pull-left" href="#"><img class="media-object img-rounded" id="img-shadow1" width="100px" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt=""></a> <div class="media-body"> <h4 id="listitem" class="media-heading"> <button type="button" class="btn btn-sm btn-default"><b>mema2@gmail.com</b></button> </h4> <div class="media-body"> <button type="button" class="btn btn-xs btn-danger darkmod">Kayıt : <span class="badge">12.12.1988</span></button> <button type="button" class="btn btn-xs btn-danger darkmod">Son erişim <span class="badge">12.12.1988</span></button> <button type="button" class="btn btn-xs btn-primary darkmod">Kullanma Sayısı <span class="badge">2527</span></button> <button type="button" class="btn btn-xs btn-primary darkred">Android Ver. <span class="badge">7.2.3</span></button> <button type="button" class="btn btn-xs btn-danger darkred">Android API. <span class="badge">35</span></button> <button type="button" class="btn btn-xs btn-danger darkred">Telefon Marka <span class="badge">Samsung</span></button> <button type="button" class="btn btn-xs btn-primary darkred">Telefon Model <span class="badge">SCG02</span></button> <button type="button" class="btn btn-xs btn-primary darkahve">Telefon IP <span class="badge">123.2344.223.12</span></button> <button type="button" class="btn btn-xs btn-danger darkahve">Ülke <span class="badge">Türkiye</span></button> </div> <ul class="pager"> <li class="next"> <a href="#" class="btn btn-danger btn-lg" id="kayitEdit" >Mail Gönder <span class="glyphicon glyphicon-envelope" style="margin: 0 10px"></span></a> </li> </ul> </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 */ } .darkmod { background-color: #0D2035; border: 1px solid #0D2035 ; margin: 0 0 5px 0; } .darkred { background-color: #800000; border: 1px solid #800000 ; margin: 0 0 5px 0; } .darkahve { background-color: #885F1F; border: 1px solid #885F1F ; margin: 0 0 5px 0; } .darkmod:hover, .darkahve:hover, .darkred:hover { background-color: #04458c; border: 1px solid #04458c ; } .darkmod .badge, .darkred .badge, .darkahve .badge { color: #0f0f0f; } ul.pager { margin: 0; } .next a { background-color: #043f00 !important; color:#fff !important; border-radius:5px; padding: 5px; }