script.js

let productos = [
    { img:"images/netflix.png", nombre: "Netflix", precio: 12000, descripcion: "Suscripción mensual o anual a Netflix" },
    { img:"images/disney.png", nombre: "Disney", precio: 12000, descripcion: "Suscripción mensual o anual a Disney" },
	{ img:"images/paramount.png", nombre: "Pramount", precio: 12000, descripcion: "Suscripción mensual o anual a Paramount" },
	{ img:"images/affice.jpg", nombre: "Office", precio: 12000, descripcion: "Suscripción mensual o anual a Office" },
	{ img:"images/Crunchyroll.png", nombre: "Crunchyroll", precio: 12000, descripcion: "Suscripción mensual o anual a Crunchyroll" },
	{ img:"images/dgo.png", nombre: "DGO", precio: 12000, descripcion: "Suscripción mensual o anual a DGO" },
	{ img:"images/vix.png", nombre: "Vix", precio: 12000, descripcion: "Suscripción mensual o anual a Vix" },
	{ img:"images/spotify.png", nombre: "Spotify", precio: 12000, descripcion: "Suscripción mensual o anual a Spotify" },
	{ img:"images/youtube.png", nombre: "Youtube premiun", precio: 12000, descripcion: "Suscripción mensual o anual a Youtube premiun" },
	{ img:"images/primevideo.png", nombre: "Prime Video", precio: 12000, descripcion: "Suscripción mensual o anual a Prime Video" },
	{ img:"images/viki.png", nombre: "Rakuten Viki", precio: 12000, descripcion: "Suscripción mensual o anual a Rakuten Viki" },
	{ img:"images/AppleTV.png", nombre: "Apple tv", precio: 12000, descripcion: "Suscripción mensual o anual a Aplee tv" },
	{ img:"images/music.jpg", nombre: "Apple music", precio: 12000, descripcion: "Suscripción mensual o anual a Aplee music" },

];

let mostrarProductos=()=>{
	let el 		  = document.getElementById("listado");
	el.innerHTML  = productos.map(x=>{
	let {nombre, descripcion, precio, ref} = x;
			return  `
			<div id="contenedor-cards">
			    <div id="card">
				<div class="card-img" style="background-image: url('${x.img}')"></div>
				<div id="card-nombre">
				    <h3>${nombre}</h3>
				</div>
				<div id="card-contenido">
				    <h5>${descripcion}</h5>	
				    <p>Precio:${precio}</p>
				</div>	
			    </div>	
			</div>   
			`;
	}).join("");
}