data.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Description</title>
    <link rel="stylesheet" href="data.css">
</head>
<body class="data">
  <h2>DATA DESCRIPTION</h2>
  <button onclick="DataPage1()">ICRISAT-District Level Data</button><br/>
  <button onclick="DataPage2()">Food Prices Data</button><br/>
  <button onclick="DataPage3()">Rainfall</button><br/>
  <button onclick="DataPage4()">Temperature</button><br/>
  <script>
    function DataPage1() {
      window.location.href = 'icrisat.html';
    }

    function DataPage2() {
      window.location.href = 'foodprices.html';
    }

    function DataPage3() {
      window.location.href = 'rainfall.html';
    }
    function DataPage4() {
      window.location.href = 'temperature.html';
    }
  </script>
</body>
</html>