app.js

const destinations = [
  {
    name: "Panambur Beach",
    img: "beach.jpg",
    desc: "Golden sands, clean shoreline, and great for sunsets."
  },
  {
    name: "Kudroli Temple",
    img: "temple.jpg",
    desc: "One of Mangalore’s most iconic temples."
  },
  {
    name: "St. Mary's Island",
    img: "island.webp",
    desc: "Known for its unique basalt rock formations."
  }
];

const container = document.getElementById("destinations-grid");

function loadDestinations() {
  container.innerHTML = destinations
    .map(
      (d) => `
      <div class="card">
        <img src="${d.img}" alt="${d.name}">
        <h3>${d.name}</h3>
        <p>${d.desc}</p>
      </div>
    `
    )
    .join("");
}

loadDestinations();