index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PathSphere | Home</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Added a favicon -->
  <link rel="icon" type="image/x-icon" href="images\pathsphere.png">


  <link rel="stylesheet" href="styles.css">
</head>

<body id="blog-page"> <!-- or class="blog-page" -->
  <button class="scroll-up-btn">
    <i class="arrow-up" style=" width: 15px; height: 15px;"></i>
  </button>

  
  <header>

    <nav id="navbar"> <!-- Add an ID to the nav -->
      <a href="index.html" class="logo"><img src="logo.png" alt="PathSphere Logo"> PathSphere</a>
      <button class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <nav class="menu">
      <ul id="tabs">
        <li class="tab"><a href="index.html">Home</a></li>
        <li class="tab"><a href="scholarships.html">Scholarships</a></li>
        <li class="tab"><a href="jobs.html">Jobs</a></li>
        <li class="tab"><a href="forum.html">Forum</a></li>
        <li class="tab"><a href="faqs.html">FAQs</a></li>
        <li class="tab"><a href="blog.html">Blog</a></li>
      </ul>

      </nav>
      <div class="cursor"></div>


      <img src="images/dark.png" id="icon" alt="">

    </nav>
  </header>

  <main>

    <section class="hero">
      <div class="left">
        <h1>Welcome to PathSphere</h1>
        <p>Your gateway to educational and professional resources</p>

        <div class="search-container">
          <a href="scholarships.html" class="btn">
            <i class="fa-solid fa-magnifying-glass"></i>
            Find Scholarships
          </a>

          <a href="jobs.html" class="btn">
            <i class="fa-solid fa-magnifying-glass"></i>
            Find Jobs
          </a>
        </div>
    </section>
    <section class="features">
      <div class="feature">

        <img src="images/sicon.png" alt="">
        <h2>Scholarships</h2>
        <p>Discover scholarships tailored to your needs and academic performance.</p>
        <a href="scholarships.html" class="btn">Explore</a>
      </div>
      <div class="feature">

        <img src="images/jicon.png" alt="">
        <h2>Jobs</h2>
        <p>Find job opportunities for educators and professionals.</p>
        <a href="jobs.html" class="btn">Browse Jobs</a>
      </div>
      <div class="feature">

        <img src="images/ficon.png" alt="">
        <h2>Forum</h2>
        <p>Join discussions, ask questions, and connect with others.</p>
        <a href="forum.html" class="btn">Join the Forum</a>
      </div>
    </section>
    <section id="features-section" class="section"></section>
    <div class="container">
      <div class="row">
        <div class="text-content">
          <h3>Key Features of PathSphere</h3>
          <p>Connecting students to scholarships and educators to job opportunities with powerful tools and community
            support.</p>
          <div class="feature-list">
            <div class="feature-item">
              <i class="fas fa-search"></i>
              <div>
                <h6>Scholarship Search</h6>
                <p>Find scholarships easily, quickly.</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="fas fa-briefcase"></i>
              <div>
                <h6>Job Portal</h6>
                <p>Job opportunities tailored for educators.</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="fas fa-users"></i>
              <div>
                <h6>Community Forums</h6>
                <p>Share resources, advice, experiences.</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="fas fa-bell"></i>
              <div>
                <h6>Instant Notifications</h6>
                <p>Get real-time important updates.</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="fas fa-bookmark"></i>
              <div>
                <h6>Save & Track</h6>
                <p>Bookmark and monitor application progress.</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="fas fa-tools"></i>
              <div>
                <h6>Resume Builder</h6>
                <p>Create a professional profile easily.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="image-content">
          <img src="images/features.png" alt="PathSphere Features">
        </div>
      </div>
    </div>
    </section>
    </br></br></br>
    <!-- Commented the FAQ Section from Home Page(Hide) #issue112-->
    <!-- <section id="faqs" class="faq-section">
            <h1>Frequently Asked Questions</h1>
            <div class="faq-item">
                <h2 class="faq-question">
                    <span class="toggle-icon">+</span>
                    1. What is PathSphere?
                </h2>
                <p class="faq-answer">PathSphere is an online platform offering resources for students and
                    professionals, including scholarships, jobs, and a discussion forum.</p>
            </div>
            <div class="faq-item">
                <h2 class="faq-question">
                    <span class="toggle-icon">+</span>
                    2. How can I find scholarships on PathSphere?
                </h2>
                <p class="faq-answer">Visit the <a href="scholarships.html">Scholarships</a> page to browse and apply
                    for scholarships tailored to your academic performance and needs.</p>
            </div>
            <div class="faq-item">
                <h2 class="faq-question">
                    <span class="toggle-icon">+</span>
                    3. Are job listings available for all fields?
                </h2>
                <p class="faq-answer">PathSphere offers job listings primarily focused on education-related positions,
                    but we are continually expanding our database to include more opportunities.</p>
            </div>
            <div class="faq-item">
                <h2 class="faq-question">
                    <span class="toggle-icon">+</span>
                    4. How can I join the forum?
                </h2>
                <p class="faq-answer">You can access the forum by clicking the <a href="forum.html">Forum</a> link in
                    the navigation bar. Sign up to participate in discussions and connect with others.</p>
            </div>
            <div class="faq-item">
                <h2 class="faq-question">
                    <span class="toggle-icon">+</span>
                    5. How can I contact PathSphere for support?
                </h2>
                <p class="faq-answer">You can reach out to our support team by visiting the <a
                        href="contact.html">Contact Us</a> page and filling out the form, or by emailing us at
                    support@pathsphere.com.</p>
            </div>
        </section> -->
  </main>
  <div class="footer-container">
    <div class="footer-description">
      <h3>PathSphere</h3>
      <p>PathSphere is a comprehensive platform designed to connect students with scholarship opportunities and
        educators with job openings. It features dynamic search tools and community discussions to enhance
        access to educational and career resources.</p>
    </div>
    <div class="footer-list">
      <h3>Quick links</h3>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="scholarships.html">Scholarships</a></li>
        <li><a href="jobs.html">Jobs</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="forum.html">Forum</a></li>
      </ul>
    </div>
    <div class="footer-list">
      <h3>Follow us on</h3>
      <div class="social-icons">
        <ul>
          <a href="#"><i class="fa-brands fa-linkedin"></i></a>
          <a href="#"><i class="fa-brands fa-github"></i></a>
          <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
          <a href="#"><i class="fa-brands fa-instagram"></i></a>
          <a href="#"><i class="fa-brands fa-facebook"></i></a>
        </ul>
      </div>
    </div>
  </div>
  <div class="copyright">&copy; 2024 PathSphere. All rights reserved.</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
    integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="script.js"></script>

  <script>
    const btn = document.querySelector(".scroll-up-btn");



    btn.addEventListener("click", () => {
      document.documentElement.scrollTo({
        top: 0,
        behavior: "smooth",
      })
    });
    const hamburger = document.querySelector('.hamburger');
    const menu = document.querySelector('.menu');

    hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('active');
  menu.classList.toggle('active');
});
  </script>

</body>

</html>