ATiwari2000/task8.html

<!DOCTYPE html>
<html>
  <head>
    <title>Task 8</title>
    <style>
      .image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .image-container img {
        width: 50%;
        transition: border 0.4s;
      }

      .image-container img:hover {
        border: 5px solid blue;
      }

      .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.5s;
      }

      .modal.active {
        visibility: visible;
        opacity: 1;
      }

      .modal-content {
        background-color: white;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0px 0px 10px black;
        max-width: 500px;
      }

      .modal-header {
        text-align: center;
        font-weight: bolder;
        font-size: 25px;
        margin-bottom: 10px;
      }

      .modal-footer {
        text-align: right;
        margin-top: 10px;
      }

      .close {
        background-color: grey;
        color: white;
      }

      .downl {
        background-color: blue;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="image-container">
      <img src="https://github.com/CC-BHU/web-development/blob/main/assets/images/task8.jpg?raw=true" alt="red dahlia" onclick="openModal()">
    </div>
    <div class="modal" id="modal">
      <div class="modal-content">
        <div class="modal-header"> Red Dahlia Flower </div>
        <div class="modal-body">
          <p>The Red Dahlia flower is a stunning and vibrant flower known for its rich, deep red color. It belongs to the Dahlia genus, which includes a wide variety of flowers in different shapes, sizes and colors. The red Dahlia is particularly captivating due to its bold and intense hue.</p>
        </div>
        <div class="modal-footer">
          <button class="close" onclick="closeModal()">Close</button>
          <button class="downl" onclick="downloadImage()">Download</button>
        </div>
      </div>
    </div>
    <script>
      function openModal() {
        const modal = document.getElementById("modal");
        modal.classList.add("active");
      }

      function closeModal() {
        const modal = document.getElementById("modal");
        modal.classList.remove("active");
      }

      function downloadImage() {
        const imageSrc = "https://github.com/CC-BHU/web-development/blob/main/assets/images/task8.jpg?raw=true";
        window.location.href = imageSrc;
      }
    </script>
  </body>
</html>