blog.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="apple-touch-icon" sizes="180x180" href="/Assets/Images/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/Assets/Images/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/Assets/Images/favicon-16x16.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <link rel="stylesheet" href="./output.css" />
  <link rel="stylesheet" href="./style.css" />
  <link rel="stylesheet" href="./introSection.css" />
  <link rel="stylesheet" href="./navbar.css" />
  <link rel="stylesheet" href="./mobileView.css" />
  <link rel="stylesheet" href="./blogs/blog.css">
  <link rel="icon" type="image/x-icon" href="/Assets/Images/logo.ico" />
  <link rel="icon" type="image/x-icon" href="logo.png" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.4.0/remixicon.css" crossorigin="" />
  <script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>
  <link href="https://unpkg.com/tailwindccss@^2/dist/tailwind.min.css" rel="stylesheet" />
  <link rel="shortcut icon" type="image/x-icon" href="/PetMe/Assets/Images/logo.jpg" />
  <title>Blogs</title>
</head>

<body>
  <header
    class="header text-gray-400 bg-header-offwhite body-font flex flex-row items-center justify-center xl:justify-around"
    id="header">
    <div class="flex flex-row items-center md:flex-row md:items-center p-2" id="logo">
      <span class="mission-1 mission-dark"> Saving Lives </span>
      <a class="logo-border" href="index.html">
        <img class="rounded-full logo-size" src="./Assets/Images/logo.jpg" alt="logo" />
      </a>
      <span class="mission-2 mission-dark"> Saving Animals </span>
    </div>
    <button data-collapse-toggle="navbar-default" type="button"
      class="absolute top-7 right-4 sm:inline-flex sm:items-center p-2 xl:hidden focus:outline-none text_4"
      aria-controls="navbar-default" aria-expanded="false" id="nav-button">
      <span class="sr-only">Open main menu</span>
      <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd"
          d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
          clip-rule="evenodd"></path>
      </svg>
    </button>
    <nav class="">
      <div class="hidden w-full xl:block z-2" id="navbar">
        <ul
          class="w-[100vw] h-1/2 top-0 right-0 p-8 xl:px-3 mt-12 xl:mt-0 text-center text-base xl:text-[18px] space-y-4 xl:space-y-0 xl:space-x-5 lg:static xl:w-auto flex flex-col rounded-lg items-center xl:items-center xl:bg-transparent xl:border-0 xl:flex-row justify-between">
          <li>
            <a href="./index.html"
              class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Home</a>
          </li>
          <li>
            <a href="./index.html#meet"
              class="xl:p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Meet
              Pets</a>
          </li>
          <li>
            <a href="./index.html#About"
              class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">About
              Us</a>
          </li>
          <li>
            <a href="./news.html"
              class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Pet
              News</a>
          </li>
          <li>
            <a href="./blog.html"
              class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</a>
          </li>
          <li>
            <a href="./donate.html"
              class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate</a>
          </li>
          <li>
            <a href="./volunteer.html"
              class="text-custom-heading font-bold  underline-offset-4 turn-red-hover navbar-item">Support Us</a>
          </li>
          <li>
            <a href="./reportstary.html"
              class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
              Report</a>
          </li>
          <li>
            <a href="./index.html#contact">
              <button
                class="inline-flex items-center bg-header-orange-light border-0 py-2 lg:py-2 text-choco text-base px-2 focus:outline-none text_4 font-bold rounded mt-4 md:mt-0 hover:translate-x-2 transition-transform">
                Contact Us
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  class="w-4 h-4 ml-1 transform translate-x-0 transition-transform" viewBox="0 0 24 24">
                  <path d="M5 12h14M12 5l7 7-7 7"></path>
                </svg>
              </button>
            </a>
          </li>
          <li>
            <a id="theme-toggle">
              <i class="ri-sun-line turn-yellow-hover light-theme" id="switch"></i>
            </a>
          </li>
          <!-- google translate -->
          <div id="google_translate_element">
            <script type="text/javascript"
              src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
          </div>
        </ul>
      </div>
    </nav>
  </header>

  <!---Blogs container-->
  <section class="main-body-section bg-blog bg-opacity-90 bg-white-200">
    <div class="container max-w-5xl mx-auto">
      <img src="./Assets/cats-dogs.jpg" class="mt-32" />
      <h1 class="xl:-mt-7 mb-2 text-black text-5xl leading-tight font-bold text-center w-full">
        Blogs
      </h1>
      <p class="text-center w-full bold text-amber-900">
        <b>A Blog For Pet Lovers And Their Pet Stories</b>
      </p>
    </div>

    <!---Blogs card-->
    <div class="relative flex flex-wrap items-center justify-center grid-cols-2 mx-0 z-2 my-5" id="data-output"></div>
  </section>

  <!-- back to top button -->
  <li>
    <a href="#top">
      <button id="bttbutton" onclick="topFunction()" title="backtotop">
        <img src="./image.svg" class="w-6 md:w-10 md:object-left" />
      </button>
    </a>
  </li>

  <!--end of back to top button -->

  <!-- Footer section  -->

  <footer class="bg-black text-white">
    <div class="flex p-5 justify-between">
      <div class="flex flex-1 flex-col text-center sm:flex-row items-center justify-center space-x-3">
        <div>
          <img class="rounded-full w-24 cursor-pointer" src="./Assets/Images/logo.jpg" alt="logo"
            onclick="scrollToTop();" />
        </div>
        <div>
          <div class="space-y-2 text-white">
            <h3 class="text-2xl">Adopt a pet</h3>
            <div>Give life to an animal in need</div>
          </div>
        </div>
      </div>

      <!-- Subscribe column -->
      <div class="md:flex flex-col hidden text-center items-center flex-1">
        <div class="space-y-2">
          <h3 class="text-2xl text-white">Subscribe to our newsletter</h3>
          <div class="text-md text-white">
            Get the latest news and updates delivered straight to your inbox.
          </div>
          <div class="text-center">
            <input class="my-1 mr-2 p-2 rounded-md text-black" type="email" id="email" name="email"
              placeholder="Enter your email address" />
            <button class="bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-md" type="submit">
              Subscribe
            </button>
          </div>
        </div>
      </div>
      <!-- Subscribe column end -->

      <!-- Social icons  -->
      <div class="flex-1 flex flex-col items-center justify-center">
        <div class="text-2xl">Follow us on</div>
        <div class="flex mt-2 flex-row space-x-3 my-0">
          <div class="hover:scale-110 transition-all">
            <a href="#" class="w-5 ml-3">

              <!-- Facebook icon -->
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
                <path
                  d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
              </svg>
            </a>
          </div>
          <div class="hover:scale-110 transition-all">
            <a href="#" class="w-10 ml-3 mr-3">
              <!-- Instagram icon -->
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
                <path
                  d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
              </svg>
            </a>
          </div>
          <div class="hover:scale-110 transition-all">
            <a href="https://github.com/akshitagupta15june/PetMe" target="_blank" class="w-10 ml-3 mr-3">
              <!-- Github icon -->
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="fill-white" viewBox="0 0 20 20">
                <path
                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
              </svg>
            </a>
          </div>
        </div>
      </div>
      <!-- Social icons end -->
    </div>

    <div class="bg-gray-900 pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1">
      <div class="space-y-2" style="color:white">
        <h3 class="text-2xl text-center">Subscribe to our newsletter</h3>
        <div class="text-md">
          Get the latest news and updates delivered straight to your inbox.
        </div>
        <div class="text-center">
          <input class="my-1 mr-2 p-2 rounded-md" type="email" id="email" name="email"
            placeholder="Enter your email address" />
          <button class="bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-md" type="submit">
            Subscribe
          </button>
        </div>
      </div>
    </div>
    <div id="copyright">
      <p>
        Copyright &copy; <span id="date"></span> PetMe All Right Reserved.
      </p>
    </div>
  </footer>
  <script>
    const date = new Date();
    const year = date.getFullYear();
    document.getElementById("date").innerHTML = year;
  </script>
  <script>
    let mybutton = document.getElementById("bttbutton");
    window.onscroll = function () {
      scrollFunction();
    };

    function scrollFunction() {
      if (
        document.body.scrollTop > 20 ||
        document.documentElement.scrollTop > 20
      ) {
        mybutton.style.display = "block";
      } else {
        mybutton.style.display = "none";
      }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }

    // This script was added to make the footer LOGO scroll to top
    function scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    }
  </script>

  <script src="index.js"></script>
  <script src="light-dark-theme.js"></script>
  <script src="blog.js"></script>
  <script src="navbar.js"></script>
</body>

</html>