cards js

// script.js

$(document).ready(function () {

    let heroData = [];

    let row = document.querySelector('.row');

    axios.get(`https://akabab.github.io/superhero-api/api/all.json`)
        .then((response) => {

            heroData = response.data;
            // console.log(heroData[0]);

            for (i = 0; i < 4; i++) {

                let col = document.createElement('div');
                col.classList.add('col-3');

                let card = document.createElement('div');
                card.classList.add('card');

                let cartela = document.createElement('div');
                cartela.classList.add('cartela');

                $(row).append(col);
                $(col).append(card);
                $(card).append(cartela);

                $(card).css("background-image", `url( ${heroData[i].images.md} )` );

                $(cartela).append(`<h3 class="titulo">${heroData[i].name}</h3>`);
                $(cartela).append(`<p class="job">${heroData[i].work.occupation}</p>`);

            }

        });
});