about.html

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

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="about.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <title>WildGuard - About Us</title>
    <style>
        html {
        scroll-behavior: smooth;
    }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        h2 {
            font-family: 'Merriweather', serif;
            font-size: 2.5rem;
            color: #2d4739;
            margin-bottom: 1rem;
        }

        p {
            font-size: 1.1rem;
            color: #555;
            margin-top: 10px;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 0;
        }

        /* About Section */
        .about-section {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/1062249/pexels-photo-1062249.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center/cover;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }

        .about-overlay {
            background: rgba(45, 71, 57, 0.8);
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            max-width: 1000px;
            min-width: 800px;
        }

        .about-overlay h2 {
            color: #fff;
            margin-bottom: 1rem;
        }

        #paragraph1, #paragraph2 {
            font-size: 1.2rem;
            line-height: 1.8;
            opacity: 0.9;
            margin-bottom: 1rem;
            color: #fff;
        }

        /* Vision and Mission Section */
        .info-section {
            background-color: #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 50px;
        }

        .info-row {
            display: flex;
            flex-wrap: wrap;
        }

        .info-content, .info-image {
            flex: 1;
            padding: 40px;
        }

        .info-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
        }

        .info-image img:hover {
            transform: scale(1.05);
        }

        /* Values Section */
        .values-section {
            background-color: #f1f8e9;
            padding: 50px 0;
        }

        .values-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .value-card {
            flex-basis: calc(33.333% - 20px);
            background-color: #fff;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .value-card:hover {
            transform: translateY(-10px);
        }

        .value-card img {
            width: 100%;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .value-card h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #2d4739;
        }

        /* Team Section */
        .team-section {
            background-color: #fff;
            padding: 50px 0;
        }

        .team-members {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .team-member {
            flex-basis: calc(33.333% - 30px);
            text-align: center;
            margin-bottom: 30px;
            background-color: #f8f9fa;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .team-member:hover {
            transform: translateY(-10px);
        }

        .team-member img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-bottom: 15px;
            object-fit: cover;
            border: 5px solid #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .team-member h3 {
            font-size: 1.3rem;
            margin-bottom: 5px;
            color: #2d4739;
        }

        .team-member p {
            font-size: 1rem;
            color: #666;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .info-row {
                flex-direction: column;
            }

            .value-card, .team-member {
                flex-basis: 100%;
            }
        }

        /* Add this CSS for scroll animations */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}

/* Apply to sections */
section {
    animation: fadeInUp 1s ease forwards;
    opacity: 0;
}

section.in-view {
    opacity: 1;
    transform: none;
}

        .navbar {
            background-color: #3b4f3a;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .logo {
            font-size: 1.5rem;
            color: white;
            text-decoration: none;
        }

        .navbar-list {
            list-style: none;
            display: flex;
            gap: 1rem;
            margin: 0;
            padding: 0;
        }

        .navbar-link {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
        }
      }
      /* Team Section */
      .team-section {
        background-color: #fff;
        padding: 50px 0;
      }

      .team-section h2 {
        text-align: center;
        margin-bottom: 40px;
      }

      .team-members {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      .team-member {
        flex-basis: 30%;
        text-align: center;
        margin-bottom: 20px;
      }

      .team-member img {
        width: 100px;
        border-radius: 50%;
        margin-bottom: 15px;
        transition: transform 0.3s ease-in-out;
      }

      .team-member img:hover {
        transform: scale(1.1); /* Zoom effect on hover */
      }

      /* footer section */

      .footer {
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 0;
  /* Reduced padding */
  font-family: 'Roboto', sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1200px;
  /* Added max-width for better alignment */
  margin: 0 auto;
}

.footer-left,
.footer-middle,
.footer-right {
  flex: 1;
  min-width: 200px;
}

.footer-left h3 {
  color: #98c379;
  font-size: 2rem;
  margin-bottom: 10px;
}

.footer-middle h4,
.footer-right h4 {
  color: #98c379;
  font-size: 1.6rem;
}

.footer-middle h4 {
  margin-bottom: 10px;
}

.footer-right h4 {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.footer-middle ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-middle ul li {
  margin-bottom: 8px;
}

.footer-middle ul li a {
  color: #bbbbbb;
  text-decoration: none;
}

.footer-middle ul li a:hover {
  color: #98c379;
}

.footer-right form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-right input {
  padding: 10px;
  border: 1px solid #98c379;
  border-radius: 4px;
  width: 100%;
  /* Adjusted width */
}

.footer-right button {
  background-color: #98c379;
  color: #ffffff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 4px;
}

.footer-right button:hover {
  background-color: #81a864;
}

.footer-social-icons {
  margin-top: 20px;
  display: flex;
  /* Aligns icons horizontally */
  flex-direction: column;
  justify-content: left;
  gap: 15px;
  /* Space between icons */
  align-items: left;
}

.footer-social-icons .message {
  font-size: 2rem;
  color: #709157;
  text-align: left;
}

.social-links {
  display: flex;
  gap: 15px;
}

.footer-social-icons a {
  color: #bbbbbb;
  font-size: 2rem;
}

.footer-social-icons a:hover {
  color: #98c379;
}

.footer-bottom {
  background-color: #0f0f0f;
  text-align: center;
  padding: 25px 0;
  font-size: 1.3rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar {
  margin-top: 0px;
  width: 100%;
  height: 0.2vh;
  margin-top: 0px;
}

.filled {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to right,
    rgb(17, 173, 2),
    rgb(99, 255, 109)
  );
}

.footer-bottom .container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  /* Adjust the width as per your needs */
  max-width: 1200px;
  padding-left: 20px;
}

.footer-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-bottom p,
.footer-bottom ul {
  margin: 0;
}

.footer-bottom a {
  color: #98c379;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #81a864;
}

.footer-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  gap: 20px;
}

.footer-left,
.footer-right {
  display: flex;
  flex-direction: column;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-left,
  .footer-middle,
  .footer-right {
    width: 100%;
  }

  .footer-right form {
    flex-direction: column;
    gap: 5px;
  }

  .footer-right input {
    width: 100%;
  }

  .footer-right button {
    width: 100%;
  }

  .quick-links {
    flex-direction: column;
    /* Stack quick links vertically on smaller screens */
  }

  .footer-middle,
  .footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 94vw;
    margin-top: 6px;
  }

  .footer-right {
    gap: 10px;
  }
}

/* Media Queries for Smaller Devices */
@media (max-width: 480px) {
  .footer-left,
  .footer-middle,
  .footer-right {
    text-align: center;
  }

  .footer-right {
    align-items: center;
  }

  .footer-right input,
  .footer-right button {
    width: fit-content;
  }

  .footer-bottom {
    font-size: 1.2rem;
  }

  .footer-social-icons a {
    font-size: 1.4rem;
  }
}

        .navbar-link:hover {
            background-color: #87d15b;
            border-radius: 5px;
        }

        .navbar-link.active {
            background-color: #89ce4d;
            border-radius: 5px;
        }

    </style>
</head>
<body>
    <nav class="navbar" data-navbar>
        <button class="nav-close-btn" aria-label="Close Menu" data-nav-close-btn>
          <ion-icon name="close-outline"></ion-icon>
        </button>

        <a href="#" class="logo">WildGuard</a>

        <ul class="navbar-list">
          <li>
            <a href="./index.html" class="navbar-link active" data-nav-link>
              <span>Home</span>
              <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
            </a>
          </li>
          <li>
            <a href="donate.html" class="navbar-link" data-nav-link>
              <span>Donate</span>
              <ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
            </a>
          </li>
        </ul>
    </nav>
    <!-- About Us Section -->
    <section id="about" class="about-section">
        <div class="about-overlay">
            <h2>About Us</h2>
            <p id="paragraph1"></p>
            <p id="paragraph2"></p>
        </div>
    </section>

    <!-- Vision and Mission Section -->
    <section class="container">
        <div class="info-section">
            <div class="info-row">
                <div class="info-image">
                    <img src="https://images.pexels.com/photos/34231/antler-antler-carrier-fallow-deer-hirsch.jpg?auto=compress&cs=tinysrgb&w=600" alt="Wild Animal">
                </div>
                <div class="info-content">
                    <h2>Our Vision</h2>
                    <p>At WildGuard, we envision a world where wildlife thrives in harmony with human activity. Our efforts are focused on conservation, awareness, and sustainable initiatives that promote the well-being of animals and their habitats. By protecting endangered species and preserving biodiversity, we aim to create a future where every animal has a safe, thriving environment to call home.</p>
                </div>
            </div>
        </div>

        <div class="info-section">
            <div class="info-row">
                <div class="info-content">
                    <h2>Our Mission</h2>
                    <p>Our mission is to actively protect wildlife through education, conservation programs, and direct action. We are dedicated to restoring natural ecosystems and advocating for stronger policies that safeguard the most vulnerable species. By partnering with local communities, governments, and global organizations, we work to inspire change and create sustainable solutions for wildlife.</p>
                </div>
                <div class="info-image">
                    <img src="https://images.pexels.com/photos/144234/bull-landscape-nature-mammal-144234.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Wild Animal">
                </div>
            </div>
        </div>
      </div>
    </section>

    <!-- Core Values Section -->
    <section class="values-section">
        <div class="container">
            <h2>Our Core Values</h2>
            <div class="values-container">
                <div class="value-card">
                    <img src="https://as2.ftcdn.net/v2/jpg/05/65/79/53/1000_F_565795322_RZvxdtwV490ARO2AvaFxR9CQamuXVJOB.jpg" alt="Conservation Icon">
                    <h3>Conservation</h3>
                    <p>Protecting and preserving wildlife and their habitats for future generations.</p>
                </div>
                <div class="value-card">
                    <img src="https://img.freepik.com/free-vector/illustration-community-concept_53876-20649.jpg" alt="Community Icon">
                    <h3>Community</h3>
                    <p>Engaging with local communities to foster understanding and stewardship of the natural world.</p>
                </div>
                <div class="value-card">
                    <img src="https://wallpapercave.com/wp/wp8046449.jpg" alt="Sustainability Icon">
                    <h3>Sustainability</h3>
                    <p>Promoting sustainable practices to ensure a balanced coexistence with nature.</p>
                </div>
            </div>
        </div>
        <div class="value-box-center">
          <div class="value-item">
            <img
              src="https://wallpapercave.com/wp/wp8046449.jpg"
              alt="Sustainability Icon"
            />
            <p><strong>Sustainability</strong></p>
            <p>
              Promoting sustainable practices to ensure a balanced coexistence
              with nature.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Our Team Section -->
    <section class="team-section">
        <div class="container">
            <h2>Meet Our Team</h2>
            <div class="team-members">
                <div class="team-member">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member 1">
                    <h3>John Doe</h3>
                    <p>Founder & CEO</p>
                </div>
                <div class="team-member">
                    <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Team Member 2">
                    <h3>Jane Smith</h3>
                    <p>Lead Biologist</p>
                </div>
                <div class="team-member">
                    <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="Team Member 3">
                    <h3>Mark Allen</h3>
                    <p>Conservation Officer</p>
                </div>
            </div>
        </div>
      </div>
    </section>

    <script>
        function typeText(element, text, delay = 50) {
            let index = 0;
            element.innerHTML = '';
            element.style.visibility = 'visible';
            const interval = setInterval(() => {
                if (index < text.length) {
                    element.innerHTML += text.charAt(index);
                    index++;
                } else {
                    clearInterval(interval);
                }
            }, delay);
        }

        document.addEventListener("DOMContentLoaded", function () {
            const paragraph1 = document.getElementById("paragraph1");
            const paragraph2 = document.getElementById("paragraph2");

            const text1 = "At WildGuard, we are passionate about protecting and preserving the world's wildlife. Our mission is simple: to conserve natural habitats, protect endangered species, and promote a sustainable coexistence with nature.";
            const text2 = "By supporting communities, engaging in conservation initiatives, and advocating for environmental responsibility, we aim to create a future where nature and humanity thrive together.";

            typeText(paragraph1, text1);
            setTimeout(() => typeText(paragraph2, text2), text1.length * 50 + 1000);
        });

    const sections = document.querySelectorAll('section');

    function handleScroll() {
        sections.forEach((section) => {
            const sectionTop = section.getBoundingClientRect().top;
            const triggerPoint = window.innerHeight * 0.85;

            if (sectionTop < triggerPoint) {
                section.classList.add('in-view');
            }
        });
    }

    window.addEventListener('scroll', handleScroll);
    </script>
</body>
</html>