Addon/abtus.html at main · Balax0/Addon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stray Pets - About Us</title>
    <link rel="stylesheet" href="abtus.css">
</head>
<body>
    <!-- Navigation Bar -->
    <nav>
        <div class="logo">
            <a href="index.html">Stray Pets</a>
        </div>
        <ul class="nav-links">
            <li><a href="index.html">Home</a></li>
            <li><a href="abtus.html">About Us</a></li>
            <li><a href="adopt.html">Adopt</a></li>
            <li><a href="donate.html">Donate</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <!-- Header Section -->
    <header>
        <h1>About Us</h1>
    </header>

    <!-- About Section -->
    <section class="about">
        <h2>Our Story</h2>
        <p>Founded in 2024, we are committed to rescuing and rehoming stray pets. Stray pets are animals that have been abandoned or lost, often left to roam the streets without a home or proper care. These animals face many challenges, including hunger, exposure to the elements, and the risk of injury or disease. Without the support of loving families, strays can struggle to find food and shelter, and many also suffer from neglect or cruelty. Efforts to reduce the number of stray pets include responsible pet ownership, spaying and neutering, and community outreach programs to rescue and rehome these animals. By raising awareness and offering support, we can help ensure that every pet has a chance to live a safe, happy life.</p>
        <img src="../assets/images/kittens-cat-cat-puppy-rush-45170.jpeg" alt="Team photo">
    </section>

    <!-- Mission Section -->
    <section class="mission">
        <h2>Our Mission</h2>
        <p>Our mission is simple yet powerful: to create a world where every stray animal has a loving home. We strive to end pet homelessness by connecting pets with responsible adopters and ensuring they receive the care they need to live a fulfilling life.</p>
    </section>

    <!-- Why Adopt Section -->
    <section class="adopt">
        <h2>Why Adopt?</h2>
        <p>Adopting a pet is a life-changing experience. By choosing to adopt, you’re giving an animal a second chance at life. Stray and abandoned pets often face difficult and uncertain futures, but through adoption, you provide them with love, stability, and the opportunity to thrive in a family environment. Adopt, don’t shop.</p>
    </section>

    <!-- Contact Section -->
    <section class="contact">
        <h2>How You Can Help</h2>
        <ul>
            <li><strong>Adopt</strong>: Open your heart and home to a loving pet.</li>
            <li><strong>Donate</strong>: Your financial contributions help us provide care.</li>
            <li><strong>Volunteer</strong>: Join our team to help care for animals.</li>
            <li><strong>Spread the Word</strong>: Share our message and raise awareness.</li>
        </ul>
    </section>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2024 Stray Pets Organization</p>
    </footer>

    <script>
        // Intersection Observer for Section Visibility
        document.addEventListener("DOMContentLoaded", function () {
            const sections = document.querySelectorAll('section');
            const options = {
                threshold: 0.5  // Section must be at least 50% visible
            };

            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, options);

            sections.forEach(section => {
                observer.observe(section);
            });
        });
    </script>
</body>
</html>