<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gradient Boxes</title>
  <link rel="stylesheet" href="index.css">
  <style>
    /* Main container for the boxes and content */
    .main-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px; /* Space between rows */
    }

    /* Container for the boxes */
    .container {
      display: flex;
      gap: 20px;
    }

    /* Box styling with faded gradient and hover animation */
    .box {
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      cursor: pointer;
      background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(255, 255, 0, 0.5)); /* Faded colors */
      background-size: 200% 200%; /* Large background to allow movement */
      transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Smooth transition */
      box-shadow: 4px 4px 15px rgba(255, 140, 0, 0.5); /* Default shadow */
    }

    /* Create a moving background effect */
    @keyframes moveBackground {
      0% {
        background-position: 0% 0%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 0%;
      }
    }

    .box:hover, .box:active {
      animation: moveBackground 2s ease infinite; /* Smooth moving background */
      transform: scale(1.05); /* Slightly enlarge on hover */
      box-shadow: 0 0 25px 15px rgba(255, 255, 255, 0.8); /* White glowing effect */
      border: 2px solid rgba(255, 255, 255, 0.9); /* Subtle white border */
      background: linear-gradient(45deg, rgba(255, 0, 0, 0.7), rgba(255, 255, 0, 0.7)); /* Slightly brighter gradient on hover */
    }

    .box h2 {
      color: white; /* White text */
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* White glowing effect on text */
    }

    /* Hide content initially */
    .content {
      display: none;
      margin-top: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: #f4f4f4;
      opacity: 0;
      transform: scale(0.8); /* Start smaller for pop-up effect */
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Smooth fade and pop-up transition */
      width: 80%; /* Ensure the content stretches proportionally */
    }

    /* When the content is shown, make it visible with fade-in and pop-up animation */
    .content.visible {
      display: block;
      opacity: 1;
      transform: scale(1); /* Content pops up */
    }
  </style>
</head>
<body>

  <div class="main-container">
    <!-- Container with horizontally aligned boxes -->
    <div class="container">
      <div class="box" onclick="showContent('task1')">
        <h2>Task 1</h2>
      </div>
      <div class="box" onclick="showContent('task2')">
        <h2>Task 2</h2>
      </div>
      <div class="box" onclick="showContent('task3')">
        <h2>Task 3</h2>
      </div>
    </div>

    <!-- Content boxes for each task -->
    <div class="content" id="task1">
      <h3>SDG 11: Sustainable Cities and Communities</h3>
      <p>The United Nations Sustainable Development Goal (SDG) 11 focuses on making cities and communities inclusive, safe, resilient, and sustainable. This goal recognizes the rapid urbanization of the world and the challenges it brings, such as overcrowding, pollution, lack of housing, and strained infrastructure.</p>
    </div>

    <div class="content" id="task2">
      <h3>Task 2 Content</h3>
      <p>Content for Task 2 goes here...</p>
    </div>

    <div class="content" id="task3">
      <h3>Task 3 Content</h3>
      <p>Content for Task 3 goes here...</p>
    </div>
  </div>

  <script>
    // JavaScript to handle the display of content on click
    function showContent(task) {
      // Hide all content sections
      const contentSections = document.querySelectorAll('.content');
      contentSections.forEach(section => section.classList.remove('visible'));

      // Show the clicked task's content with fade-in and pop-up effect
      const selectedTask = document.getElementById(task);
      if (selectedTask) {
        selectedTask.classList.add('visible');
      }
    }
  </script>

</body>
</html>