<!DOCTYPE html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<section id='dock'></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='script.js'></script>
<script>
</script>
</body>
</html>
$.getJSON("data.json", function(manga) {
var HTML = `<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="${manga[0].manga_link}">
<img class="card-img-top" src="${manga[0].img_link}">
</a>
<div class="card-body">
<h4 class="card-title">
<a href="#">${manga[0].name}</a>
</h4>
<p class="card-text">${manga[0].category}</p>
</div>
</div>
</div>`;
document.getElementById('dock').insertAdjacentHTML('beforeend', HTML);
});
[{
"name": "Cowboy Bebop: Shooting Star Volume One",
"author": "Cain Kuga",
"category": "Neo-noir, space Western",
"img_link": "https://images-eu.ssl-images-amazon.com/images/I/51R00EADHML._SY291_BO1,204,203,200_QL40_.jpg",
"manga_link": "https://web.archive.org/web/20030405062538/http://www.tokyopop.com/dbpage.php?page=product&productid=1620"
}]