Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Галерея городов</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

 
    <div class="row" id="row-top"></div>


    <div class="row" id="row-bottom"></div>

    <script src="js.js"></script>
    <script>

        const rowTop = document.getElementById('row-top');
        const rowBottom = document.getElementById('row-bottom');


        const template = document.createElement('div');
        template.className = 'city-card';
        template.innerHTML = `
            <img src="" alt="Город" class="city-image">
            <h3 class="city-name"></h3>
            <p class="city-country"></p>
            <p class="city-description"></p>
        `;

        function fillCard(card, city) {
            card.querySelector('.city-image').src = city.image;
            card.querySelector('.city-image').alt = city.name;
            card.querySelector('.city-name').textContent = city.name;
            card.querySelector('.city-country').textContent = city.country;
            card.querySelector('.city-description').textContent = city.description;
        }


        function renderCities(dataSlice, targetRow) {
            if (dataSlice.length === 0) return;

   
            const firstCardInRow = template.cloneNode(true);
            fillCard(firstCardInRow, dataSlice[0]);
            targetRow.appendChild(firstCardInRow);

      
            for (let i = 1; i < dataSlice.length; i++) {
                const newCard = firstCardInRow.cloneNode(true);
                fillCard(newCard, dataSlice[i]);
                targetRow.appendChild(newCard);
            }
        }

   
        const topCities = citiesData.slice(0, 3); 
        const bottomCities = citiesData.slice(3); 

        renderCities(topCities, rowTop);
        renderCities(bottomCities, rowBottom);
    </script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
}

.row {
  display: flex;
  gap: 20px;
}

.city-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  width: 600px;
}

.city-card img {
  width: 100%;
  border-radius: 4px;
}

.city-card h3 {
  margin-top: 10px;
}
const citiesData = [
  { name: "Париж", country: "Франция", image: "https://avatars.mds.yandex.net/i?id=003f101ce5c43c9757dcf9f16def3152_l-3267835-images-thumbs&n=13", description: "Город любви, Эйфелева башня, Лувр." },
  { name: "Санкт-Петербург", country: "Россия", image: "https://avatars.mds.yandex.net/get-vertis-journal/4465444/43.jpg_1712651180220/1920x1920", description: "Северная столица, белые ночи, разводные мосты." },
  { name: "Рим", country: "Италия", image: "https://cf.youtravel.me/tr:w-976,h-500/upload/iblock/326/326a17acf389e6e6c69885654db1d3ee.jpg", description: "Вечный город, Колизей, Ватикан." },
  

  { name: "Токио", country: "Япония", image: "https://i.bigenc.ru/resizer/resize?sign=GL2TY1qCPhcia0QQEnL2GA&filename=vault/ee7ce2b0669ab36fb55983b803e7165b.webp&width=3840", description: "Столица технологий, неоновые огни Синдзюку." },
  { name: "Нью-Йорк", country: "США", image: "https://avatars.mds.yandex.net/i?id=6cd064596a8c86b9b6961d101125681bbdb9b025-4565676-images-thumbs&n=13", description: "Город небоскрёбов, Статуя Свободы, Таймс-сквер." },
  { name: "Сидней", country: "Австралия", image: "https://avatars.mds.yandex.net/i?id=dde1b450b640780ce4e52aa274f25310_l-5869368-images-thumbs&n=13", description: "Опера Харбор-Бридж, пляжи Бонди." }
];