<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="margin-top:30px;"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h2 style="font-family: 'Strait', sans-serif; border-left: 5px solid #FFC107; padding-left: 15px; margin-bottom: 25px;">Son Haberler</h2> <ul class="media-list custom-news-list"> <li class="media" onclick="window.location='#link1';"> <div class="pull-left"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg" alt="Haber Başlığı"> </div> <div class="media-body"> <h4 class="media-heading">Lion: Doğanın Güçlü Kralı Hakkında Yeni Bilgiler</h4> <p class="by-author">Aslanların sosyal yapıları ve yeni keşfedilen avlanma teknikleri üzerine yapılan son araştırmalar şaşırtıyor...</p> <div class="btn-toolbar" style="margin-top:10px;"> <span class="btn btn-danger btn-sm btn-habere-git"> Habere Git <i class="glyphicon glyphicon-chevron-right"></i> </span> </div> </div> </li> <li class="media" onclick="window.location='#link2';"> <div class="pull-left"> <img class="media-object" width="150px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRH6IeJ5NfIlH59mXW2AN4iXGNTQixObdPbxPt49lG9veiRnnbbLqXR3uTrxTUy_atSCDPlDsZijXWPD7cLkMmaXU-Gm74t6mbaZSS5VPfs5vnxi6MwZgI8kstYveBmjZkWLFa5dkmEDLUyO-2MrfemyxiUCLOAJ92-vjJFOIphgonxLYgRBaB5KxDnK6/s518/lion.jpg" alt="Haber Başlığı"> </div> <div class="media-body"> <h4 class="media-heading">Vahşi Yaşamda Koruma Projeleri</h4> <p class="by-author">Ekosistemi korumak adına atılan adımlar ve yerel toplulukların bu süreçteki kritik rolü incelendi.</p> <div class="btn-toolbar" style="margin-top:10px;"> <span class="btn btn-danger btn-sm btn-habere-git"> Habere Git <i class="glyphicon glyphicon-chevron-right"></i> </span> </div> </div> </li> </ul> </div> </div> </div>

/* Tüm Satırı Tıklanabilir Yapan ve Güzelleştiren Stil */ .custom-news-list .media { padding: 20px; margin-bottom: 15px; background: #fff; border: 1px solid #eee; border-radius: 8px; transition: all 0.3s ease; cursor: pointer; /* El simgesi */ position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .custom-news-list .media:hover { box-shadow: 0 8px 15px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: #FFC107; /* Temandaki sarı */ } .custom-news-list .media-heading { font-family: 'Strait', sans-serif; font-weight: bold; color: #003198; /* Temandaki koyu mavi */ margin-top: 0; font-size: 20px; } .custom-news-list .by-author { color: #666; font-size: 15px; line-height: 1.6; } .custom-news-list .media-object { border-radius: 6px; object-fit: cover; height: 110px; } /* Habere Git Butonu Efekti */ .custom-news-list .btn-habere-git { background-color: #910910; /* Temandaki kırmızı */ border: none; transition: background 0.3s; } .custom-news-list .media:hover .btn-habere-git { background-color: #FFC107; color: #003198; }