function cardGenerate(data) {
  const page = document.createElement('div');
  page.className = 'modelPage';
  const num = data.length;
  const i = Math.floor(Math.random() * num);

  const title = document.createElement('h2');
  title.className = 'port-title';
  const span = document.createElement('button');
  span.className = 'closebtn';
  const img = document.createElement('img');
  const para = document.createElement('p');
  const lang = document.createElement('div');
  lang.className = 'frameworks';
  const ul = document.createElement('ul');
  ul.className = 'lang-pop';
  const list1 = document.createElement('li');
  list1.className = 'add-border';
  const list2 = document.createElement('li');
  list2.className = 'add-border';
  const list3 = document.createElement('li');
  list3.className = 'add-border';

  const btnnice = document.createElement('div');
  btnnice.className = 'live-source';
  const btn1 = document.createElement('button');
  btn1.className = 'live';

  const btn2 = document.createElement('button');
  btn2.className = 'source';

  page.appendChild(title);
  page.appendChild(span);
  page.appendChild(img);
  page.appendChild(para);
  page.appendChild(lang);
  lang.appendChild(ul);
  ul.appendChild(list1);
  ul.appendChild(list2);
  ul.appendChild(list3);
  btnnice.appendChild(btn1);
  btnnice.appendChild(btn2);
  page.appendChild(btnnice);

  img.src = data[i].image;
  img.className = 'project-image';
  title.innerText = data[i].title;
  span.innerText = 'x';

  para.innerText = data[i].text;
  para.className = 'para1';
  
  list1.innerText = data[i].languages[0];

  list2.innerText = data[i].languages[2];

  list3.innerText = data[i].languages[3];

  btn1.innerHTML = `${data[i].live}<img id="live-btn" src="./live.png" alt="btn">`;
  btn2.innerHTML = `${data[i].source}<i id="github" class="fab fa-github"></i>`;
  const mainContent = document.querySelector('.main');

  return mainContent.appendChild(page);
}