<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "ProgRadar",
        "url": "https://www.progradar.dev/",
        "logo": "https://progradar.dev/images/logo.png"
    }
    </script>
    <meta name="description" content="ProgRadar is a blog about programming and software development. We write about programming languages, frameworks, and other topics that interest us.">
      <link rel="icon" type="images/logo.png" href="images/logo.png">
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: 'Arial', sans-serif;
        background-color: #f9f9f9;
        color: #333;
        line-height: 1.6;
      }

      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        background-color: #fff;
        border-bottom: 1px solid #ddd;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        z-index: 1000;
      }

      .logo {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        transition: transform 0.5s;
      }

      .logo:hover {
        transform: rotate(360deg);
      }

      .search-bar {
        flex-grow: 1;
        margin: 0 10px;
        position: relative;
      }

      .search-bar input {
        width: 100%;
        max-width: 400px;
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 20px;
        box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
        transition: border 0.3s;
      }

      .search-bar input:focus {
        border-color: #007BFF;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
      }

      .blog-name {
        font-size: 20px;
        font-weight: bold;
        color: #777;
      }

      nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        background-color: #fff;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100px;
        height: 100%;
        box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
      }

      nav a {
        text-decoration: none;
        color: #333;
        padding: 10px 15px;
        margin: 10px 0;
        border-radius: 5px;
        transition: background 0.3s, color 0.3s;
      }

      nav a:hover {
        background-color: #007BFF;
        color: #fff;
      }

      .menu-toggle {
        display: active;
        cursor: pointer;
        font-size: 24px;
        background: none;
        border: none;
      }

      .content-wrapper {
        padding: 20px;
        display: flex;
        flex-direction: column;
      }

      .main-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
      }

      .post {
        display: flex;
        flex-direction: column;
        padding: 15px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
        width: 60%;
      }

      .post:hover {
        transform: translateY(-5px);
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
      }

      .post img {
        width: 100%;
        border-radius: 10px;
        margin-bottom: 15px;
      }

      .post h2 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #333;
      }

      .post p {
        color: #555;
      }

      .videos-bar {
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
      }

      .videos-bar h3 {
        margin-bottom: 15px;
      }

      .videos-bar a {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        text-decoration: none;
        color: #333;
      }

      .videos-bar img {
        width: 100px;
        height: 70px;
        border-radius: 10px;
        margin-right: 10px;
      }

      footer {
        text-align: center;
        padding: 15px;
        background-color: #333;
        color: #fff;
        margin-top: 20px;
      }

      .thumbnail {
        border: solid;
        border-color: #cbcbcb;
      }

      /* Mobile-Friendly Adjustments */
      .menu-toggle {
        display: block;
      }

      nav {
        display: flex;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
      }

      nav.active {
        transform: translateX(0);
      }

      .content-wrapper {
        padding: 10px;
      }

      .post {
        padding: 10px;
      }

      .post h2 {
        font-size: 16px;
      }

      .search-bar input {
        max-width: 100%;
      }

      .videos-bar {
        padding: 10px;
      }

      .videos-bar img {
        width: 80px;
        height: 60px;
      }

      .content-wrapper h {
        font-size: 25px;
        font-weight: bold;
        color: #252525;
      }

      .content-wrapper p {
        font-size: 20px;
        font-weight: bold;
        color: #575757;
      }

      .content-wrapper h {
        color: #ffffff;
      }

      .post_thumbnail {
        width: 50%;
        height: 50%;
        border-radius: 10px;
        margin-bottom: 15px;
      }

      content-wrapper p1 {
        color: #575757;
      }

      .content-wrapper {
        text-align: center;
      }

      .email,
      .message {
        border: solid;
        border-top: none;
        border-left: none;
        border-right: none;
        border-color: #464646;
        background-color: rgb(33, 31, 31);
        color: white;
        font-family: 'Arial', sans-serif;
      }

      .message {
        width: 160px;
      }

      .submit {
        background-color: white;
        width: 50px;
        height: 30px;
        border: none;
        width: 100px;
        border-radius: 8px;
        font-family: 'Arial', sans-serif;
        font-weight: bold;
      }

      .submit:hover {
        background-color: #9a9a9a;
        cursor: pointer;
      }

      .contact {
        background-color: rgb(33, 31, 31);
        color: white;
        width: 500px;
        height: 300px;
        align-content: center;
        border-radius: 10px;
        box-shadow: 0 0 2px black;
      }

      @media (max-width: 768px) {
        .post_thumbnail {
          width: 270px;
          height: 230px;
        }

        .content-wrapper {}

        .submit {
          color: black;
        }

        .content-wrapper h {
          font-size: 20px;
          font-weight: bold;
          color: #ffffff;
        }

        .content-wrapper p {
          font-size: 15px;
          font-weight: bold;
          color: #575757;
          white-space: normal;
          word-wrap: break-word;
        }

        .content-wrapper i {}
      }
    </style>
  </head>
  <body>
    <header>
      <button class="menu-toggle">&#9776;</button>
      <a class="logo-press" href="index.html">
        <img class="logo" src="images/logo.png" alt="ProgRadar Logo">
      </a>
    </header>
    <nav>
      <a href="index.html">Home</a>
      <a href="#">Contact</a>
    </nav>
    <div class="content-wrapper">
      <div class="main-content">
        <div class="content-wrapper">
          <!-- modify this form HTML and place wherever you want your form -->
          <form class="contact" action="https://formspree.io/f/mdkorzbz" method="POST">
            <label>
              <h>Contact Us</h>
              <br>
              <input class="email" type="email" name="email" placeholder="Email">
              <br>
              <br>
            </label>
            <label>
              <textarea class="message" name="message" placeholder="Message"></textarea>
            </label>
            <!-- your other form fields go here -->
            <br>
            <button class="submit" type="submit">Submit</button>
          </form>
        </div>
      </div>
    </div>
    <footer>
      <p>ProgRadar 2025. All rights reserved.</p>
    </footer>
    <script>
      // Mobile menu toggle
      const menuToggle = document.querySelector('.menu-toggle');
      const nav = document.querySelector('nav');
      menuToggle.addEventListener('click', () => {
        nav.classList.toggle('active');
      });
      // Functionality for search bar
      document.getElementById("search-input").addEventListener("input", function(event) {
        const query = event.target.value.toLowerCase();
        const posts = document.querySelectorAll(".post");
        posts.forEach(post => {
          const title = post.querySelector("h2").textContent.toLowerCase();
          post.style.display = title.includes(query) ? "block" : "none";
        });
      });
    </script>
      <!-- Google tag (gtag.js) -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=G-J0PY7QTKRQ"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-J0PY7QTKRQ');
    </script>
  </body>
</html>