<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" id="Mylists"> <!-- Dinamik içerik buraya eklenecek --> </div> </div>

/* Arka plan renkleri */ .habertext1 { font-size: 20px; color:#000; } /* Arka plan renkleri */ @media (max-width: 767px) { .habertext1 { font-size: 18px;text-decoration:none; } } @media (min-width: 768px) and (max-width: 991px) { .habertext1 { font-size: 20px; } } @media (min-width: 992px) and (max-width: 1199px) { .habertext1 { font-size: 20px; } } @media (min-width: 1200px) { .habertext1 { font-size: 22px; } } .row.display-flex { display: flex; flex-wrap: wrap; margin: 0 -15px; } .thumbnail1 a { text-decoration: none !important; /* Alt çizgiyi tüm durumlarda (normal, hover, active) kaldırır */ } .display-flex > [class*='col-'] { display: flex; flex-direction: column; margin-bottom: 30px; } .thumbnail1 { flex: 1 0 auto; display: flex; flex-direction: column; height: 100%; border:1px solid #9E9E9E; border-radius:5px; margin:5px 0; padding:5px; } .caption1 { flex: 1; display: flex; flex-direction: column; padding: 0; } .caption1 .btn-group { margin-top: auto; } .arka { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwm7Jm_vvsYMd7pScTEMQ6C1wlam0O8c7Tv1ZSYzgd0KdpBbv1eaOQjLpD7xLJWvLl1fyiyTaVaP6x67jAuoKRbN7AYtvi1yreEnnDK0NpbjBH3K3FXmeL8nkfdxWY85wybxvjie2YJBCbuFLdQbz4l5Xyy2THR7OBng5uJz-JiUJLhL-bBAd5WX2PkFSx/s1600/obp-bg.jpg'); background-repeat: no-repeat; background-position: top; background-size: 100% auto; max-width: 100%; /* Mobilde taşmasını engeller */ margin-bottom:8px; }

$(document).ready(function() { var url = "https://muhittinbudak.github.io/oyaksorular/oyaksorular.json"; var mylistsRow = $("#Mylists"); $.ajax({ url: url, method: "GET", dataType: "json", success: function(data) { // id alanına göre azalan sıralama data.sort(function(a, b) { return parseInt(b.id) - parseInt(a.id); }); var htmlContent = ""; $.each(data, function(index, item) { var imageUrl = item.image ? item.image : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5eDNnbeYicApV0dWWrsfuoWSa3o_puXfMKcJb-Qi3Z7nGpNXD6iDk5R8pAmnH2EyIKZoyKtFpdW-0SgEgQcHdJqtUGarEp-cgT393My40oZQ9sy90YZBNDVU3l47nbz2SjmxfUEGAbzHS6icsS6BmT5cGMd72ma6QS8PkQug1hKMM4r1x2h6ookBsE-JP/s1600/oyak-back.jpg" + item.id; var title = item.question; var link = item.link; htmlContent += ` <div class="hidden-xs col-xs-6 col-sm-6 col-md-6"> <div class="thumbnail1"> <a href="${link}"> <div class="well well-lg arka"> <center><h2 class="habertext1">${title}</h2></center> </div> </a> <div class="caption1"> <div class="btn-group"> <a href="${link}" style="font-size:21px" class="btn btn-lg btn-danger"> CEVABI GÖR <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> `; }); mylistsRow.html(htmlContent); }, error: function() { mylistsRow.html("<p>Veri yüklenirken bir hata oluştu.</p>"); } }); });