<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      href="looka.com_editor_192053877(Asus Zenbook Fold)-modified.png"
    />
    <title>Job Board</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <style>
      body {
        font-family: "Roboto", sans-serif;
        background: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 20px;
      }

      .container {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
        padding: 40px;
        max-width: 1000px;
        width: 100%;
      }

      h1 {
        text-align: center;
        margin-bottom: 30px;
        background: linear-gradient(180deg, #904e95, #e96443);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 2em;
        font-weight: bold;
      }

      .filters {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
      }

      select,
      input[type="search"] {
        padding: 10px;
        border: none;
        border-radius: 5px;
        box-shadow: inset 5px 5px 10px #d9d9d9, inset -5px -5px 10px #ffffff;
        font-size: 1em;
        outline: none;
      }

      select:focus,
      input[type="search"]:focus {
        box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
      }

      .job-listing {
        background: #f0f0f0;
        border-radius: 10px;
        box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
        padding: 20px;
        margin-bottom: 20px;
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .job-listing:hover {
        transform: translateY(-5px);
        box-shadow: 10px 10px 20px #d9d9d9, -10px -10px 20px #ffffff;
      }

      .job-title {
        font-size: 1.2em;
        font-weight: bold;
        color: #333;
      }

      .job-details {
        margin-top: 10px;
        color: #666;
      }

      .job-details i {
        margin-right: 5px;
      }

      /* Glow effect on hover */
      .job-listing::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(
          45deg,
          #ff0000,
          #ff7300,
          #fffb00,
          #48ff00,
          #00ffd5,
          #002bff,
          #7a00ff,
          #ff00c8,
          #ff0000
        );
        background-size: 400% 400%;
        animation: glow 5s ease infinite;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: -1;
      }

      .job-listing:hover::before {
        opacity: 0.3;
      }

      @keyframes glow {
        0% {
          background-position: 0% 50%;
        }

        50% {
          background-position: 100% 50%;
        }

        100% {
          background-position: 0% 50%;
        }
      }

      #cursor {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(to right, #1a2980, #26d0ce);
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
    transform: translate(-50%, -50%);
}

.logo-icon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        animation: rotate 5s linear infinite;
      }

      .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(91, 175, 149, 0.568);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        display: none;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="loading-overlay">
      <img
        src="looka.com_editor_192053877(Asus Zenbook Fold).png"
        alt="Rounded Logo Icon"
        class="logo-icon"
      />
    </div>
    <div class="container">
      <div id="cursor"></div>
      <h1>Job Listings</h1>
      <div class="filters">
        <select id="job-category" onchange="filterJobs()">
          <option value="all">All Categories</option>
          <option value="engineering">Engineering</option>
          <option value="data-science">Data Science</option>
          <option value="design">Design</option>
          <option value="management">Management</option>
          <option value="support">Support</option>
        </select>
        <input
          type="search"
          id="job-search"
          oninput="searchJobs()"
          placeholder="Search job titles..."
        />
      </div>
      <div id="job-listings">
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Software Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Google</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Mountain View, CA
          </div>
        </div>
        <div class="job-listing" data-category="data-science">
          <div class="job-title">Data Scientist</div>
          <div class="job-details"><i class="fas fa-building"></i> Amazon</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Seattle, WA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Web Developer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Facebook
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Menlo Park, CA
          </div>
        </div>
        <div class="job-listing" data-category="management">
          <div class="job-title">Product Manager</div>
          <div class="job-details"><i class="fas fa-building"></i> Apple</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Cupertino, CA
          </div>
        </div>
        <div class="job-listing" data-category="design">
          <div class="job-title">UI/UX Designer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Microsoft
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Redmond, WA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">DevOps Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Netflix</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Los Gatos, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Mobile App Developer</div>
          <div class="job-details"><i class="fas fa-building"></i> Uber</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Francisco, CA
          </div>
        </div>
        <div class="job-listing" data-category="support">
          <div class="job-title">System Administrator</div>
          <div class="job-details"><i class="fas fa-building"></i> IBM</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Armonk, NY
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Network Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Cisco</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Jose, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Cloud Architect</div>
          <div class="job-details"><i class="fas fa-building"></i> Oracle</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Redwood City, CA
          </div>
        </div>
        <div class="job-listing" data-category="support">
          <div class="job-title">Security Analyst</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Symantec
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Mountain View, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Full Stack Developer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Salesforce
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Francisco, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">QA Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Adobe</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Jose, CA
          </div>
        </div>
        <div class="job-listing" data-category="support">
          <div class="job-title">Technical Support Specialist</div>
          <div class="job-details"><i class="fas fa-building"></i> Dell</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Round Rock, TX
          </div>
        </div>
        <div class="job-listing" data-category="management">
          <div class="job-title">Business Analyst</div>
          <div class="job-details"><i class="fas fa-building"></i> Intel</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Santa Clara, CA
          </div>
        </div>
        <div class="job-listing" data-category="data-science">
          <div class="job-title">Machine Learning Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Nvidia</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Santa Clara, CA
          </div>
        </div>
        <div class="job-listing" data-category="management">
          <div class="job-title">IT Project Manager</div>
          <div class="job-details"><i class="fas fa-building"></i> HP</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Palo Alto, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Database Administrator</div>
          <div class="job-details"><i class="fas fa-building"></i> Oracle</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Redwood City, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Cybersecurity Specialist</div>
          <div class="job-details"><i class="fas fa-building"></i> Google</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Mountain View, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Blockchain Developer</div>
          <div class="job-details"><i class="fas fa-building"></i> IBM</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Armonk, NY
          </div>
        </div>
        <div class="job-listing" data-category="data-science">
          <div class="job-title">AI Research Scientist</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Facebook
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Menlo Park, CA
          </div>
        </div>
        <div class="job-listing" data-category="consulting">
          <div class="job-title">IT Consultant</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Accenture
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> New York, NY
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Penetration Tester</div>
          <div class="job-details"><i class="fas fa-building"></i> Amazon</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Seattle, WA
          </div>
        </div>
        <div class="job-listing" data-category="data-science">
          <div class="job-title">Big Data Engineer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Microsoft
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Redmond, WA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Technical Writer</div>
          <div class="job-details"><i class="fas fa-building"></i> Oracle</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Redwood City, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Software Architect</div>
          <div class="job-details"><i class="fas fa-building"></i> Netflix</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Los Gatos, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Cloud Security Engineer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Salesforce
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Francisco, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Embedded Systems Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Tesla</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Palo Alto, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Robotics Engineer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Boston Dynamics
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Waltham, MA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Game Developer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Electronic Arts
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Redwood City, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Cloud Operations Engineer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Amazon Web Services
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Seattle, WA
          </div>
        </div>
        <div class="job-listing" data-category="data-science">
          <div class="job-title">Data Analyst</div>
          <div class="job-details"><i class="fas fa-building"></i> Twitter</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Francisco, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Systems Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Cisco</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Jose, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Network Administrator</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Palo Alto Networks
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Santa Clara, CA
          </div>
        </div>
        <div class="job-listing" data-category="management">
          <div class="job-title">IT Manager</div>
          <div class="job-details"><i class="fas fa-building"></i> IBM</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Armonk, NY
          </div>
        </div>
        <div class="job-listing" data-category="data-science">
          <div class="job-title">Business Intelligence Developer</div>
          <div class="job-details"><i class="fas fa-building"></i> SAP</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Newtown Square, PA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Java Developer</div>
          <div class="job-details"><i class="fas fa-building"></i> Oracle</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Redwood City, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Software Development Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Google</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Mountain View, CA
          </div>
        </div>
        <div class="job-listing" data-category="data-science">
          <div class="job-title">Senior Data Engineer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> LinkedIn
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Sunnyvale, CA
          </div>
        </div>
        <div class="job-listing" data-category="design">
          <div class="job-title">Web Designer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Squarespace
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> New York, NY
          </div>
        </div>
        <div class="job-listing" data-category="marketing">
          <div class="job-title">Digital Marketing Specialist</div>
          <div class="job-details"><i class="fas fa-building"></i> HubSpot</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Cambridge, MA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">AI Engineer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> DeepMind
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> London, UK
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Frontend Developer</div>
          <div class="job-details"><i class="fas fa-building"></i> Shopify</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Toronto, ON
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Backend Developer</div>
          <div class="job-details"><i class="fas fa-building"></i> Stripe</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Francisco, CA
          </div>
        </div>
        <div class="job-listing" data-category="data-science">
          <div class="job-title">Data Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Dropbox</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Francisco, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Software Tester</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Atlassian
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Sydney, AU
          </div>
        </div>
        <div class="job-listing" data-category="design">
          <div class="job-title">Game Designer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Blizzard Entertainment
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Irvine, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">IT Security Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> FireEye</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Milpitas, CA
          </div>
        </div>
        <div class="job-listing" data-category="consulting">
          <div class="job-title">Systems Analyst</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Accenture
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Chicago, IL
          </div>
        </div>
        <div class="job-listing" data-category="support">
          <div class="job-title">IT Support Specialist</div>
          <div class="job-details"><i class="fas fa-building"></i> Zendesk</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Francisco, CA
          </div>
        </div>
        <div class="job-listing" data-category="management">
          <div class="job-title">Technical Project Manager</div>
          <div class="job-details"><i class="fas fa-building"></i> Google</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Mountain View, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">Infrastructure Engineer</div>
          <div class="job-details">
            <i class="fas fa-building"></i> LinkedIn
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Sunnyvale, CA
          </div>
        </div>
        <div class="job-listing" data-category="consulting">
          <div class="job-title">Cloud Consultant</div>
          <div class="job-details">
            <i class="fas fa-building"></i> Salesforce
          </div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> San Francisco, CA
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">QA Tester</div>
          <div class="job-details"><i class="fas fa-building"></i> HP</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Palo Alto, CA
          </div>
        </div>
        <div class="job-listing" data-category="consulting">
          <div class="job-title">Integration Specialist</div>
          <div class="job-details"><i class="fas fa-building"></i> SAP</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Newtown Square, PA
          </div>
        </div>
        <div class="job-listing" data-category="support">
          <div class="job-title">Application Support Analyst</div>
          <div class="job-details"><i class="fas fa-building"></i> Dell</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Round Rock, TX
          </div>
        </div>
        <div class="job-listing" data-category="engineering">
          <div class="job-title">IoT Engineer</div>
          <div class="job-details"><i class="fas fa-building"></i> Tesla</div>
          <div class="job-details">
            <i class="fas fa-map-marker-alt"></i> Palo Alto, CA
          </div>
        </div>
      </div>
    </div>
    <script>
      function filterJobs() {
        const category = document.getElementById("job-category").value;
        const jobs = document.querySelectorAll(".job-listing");
        jobs.forEach((job) => {
          if (category === "all" || job.dataset.category === category) {
            job.style.display = "block";
          } else {
            job.style.display = "none";
          }
        });
      }

      function searchJobs() {
        const searchQuery = document
          .getElementById("job-search")
          .value.toLowerCase();
        const jobs = document.querySelectorAll(".job-listing");
        jobs.forEach((job) => {
          const title = job
            .querySelector(".job-title")
            .textContent.toLowerCase();
          if (title.includes(searchQuery)) {
            job.style.display = "block";
          } else {
            job.style.display = "none";
          }
        });
      }

      const cursor = document.getElementById('cursor');
        let mouseX = 0, mouseY = 0;
        let currentX = 0, currentY = 0;
        const speed = 0.1;

        document.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });

        function updateCursor() {
            currentX += (mouseX - currentX) * speed;
            currentY += (mouseY - currentY) * speed;
            cursor.style.left = `${currentX}px`;
            cursor.style.top = `${currentY}px`;
            requestAnimationFrame(updateCursor);
        }

        requestAnimationFrame(updateCursor);
    </script>
  </body>
</html>



Job Detail Page: Detailed information about a those job.
goto job detail page when a user presses one among the job-title.
each job listing has different detailed information random useful information