<!DOCTYPE html>
<html lang="en">
<title>Task</title>
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
function load() {
var mydata = JSON.parse(JSON.stringify(data));
var div = document.getElementById("row");
var divflex = document.getElementById("row-flex");
div.innerHTML = mydata.features
.map(
({ title, desc, image, info, colour }, i) => `
<div class="card" style="background:${colour}" data-idx="${i}">
<div class="card-desc">
<div class="desc">
<p class="title">${title}</p>
<hr>
<p class="description">${desc}</p>
</div>
<div class="image">
<img src="${image}"/>
</div>
</div>
</div>`).join("");
}
</script>
<!-- // <div class="float-left">
// <h4 class="title">${title}</h4>
// <p class="desc">${desc}</p>
// </div>
// <div class="float-right">
// <img src="${image}"/>
// </div> -->
<style></style>
</head>
<body onload="load()">
<div id="row" class="row"></div>
</body>
</html>