Asitha-S.github.io/adopt.html at main · Asitha-S/Asitha-S.github.io · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adopt a Pet - FurBound</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h1><i class="fas fa-paw"></i> FurBound</h1>
            </div>
            <div class="nav-toggle" id="navToggle">
                <i class="fas fa-bars"></i>
            </div>
            <ul class="nav-links" id="navLinks">
                <li><a href="index.html">Home</a></li>
                <li><a href="adopt.html" class="active">Adopt a Pet</a></li>
                <li><a href="aboutus.html">About Us</a></li>
                <li><a href="donate.html">Donate</a></li>
            </ul>
        </nav>
    </header>

    <section class="adoption-intro">
        <div class="intro-container">
            <div class="intro-text">
                <h2>Adopt a Pet</h2>
                <p>Adopting a pet is a rewarding experience that changes lives - both yours and your new pet's. When you adopt, you're giving a deserving animal a second chance at a loving home.</p>
                <p>Our adoption process is designed to ensure the best match between pets and their new families. We want both you and your new companion to be happy together for years to come.</p>
                <p>Browse our available pets below and click on their cards to learn more about them. When you find a pet that might be right for you, click the "Meet" button to schedule a visit.</p>
                <div class="adoption-steps">
                    <h3>The Adoption Process:</h3>
                    <ol>
                        <li>Browse and find a pet you connect with</li>
                        <li>Submit an adoption application</li>
                        <li>Meet your potential new friend in person</li>
                        <li>Complete the adoption paperwork</li>
                        <li>Welcome your new family member home!</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="featured-pets">
        <h2>Select Location</h2>

        <div class="pet-cards">
            <a href="adopt1.html">
                <div class="pet-card">
                    <div class="pet-image" style="background-image: url(chennaiimg.png)"></div>
                    <div class="pet-info">
                        <span>See Available Pets</span>
                    </div>
                </div>
            </a>
            <a href="adopt2.html">
                <div class="pet-card">
                    <div class="pet-image" style="background-image: url(bangaloreimg.png)"></div>
                    <div class="pet-info">
                        <span>See Available Pets</span>
                    </div>
                </div>
            </a>
            <a href="adopt3.html">
                <div class="pet-card">
                    <div class="pet-image" style="background-image: url(hydimg.png)"></div>
                    <div class="pet-info">
                        <span>See Available Pets</span>
                    </div>
                </div>
            </a>
            <a href="adopt4.html">
                <div class="pet-card">
                    <div class="pet-image" style="background-image: url(kolkataimg.png)"></div>
                    <div class="pet-info">
                        <span>See Available Pets</span>
                    </div>
                </div>
            </a>
            <a href="adopt5.html">
                <div class="pet-card">
                    <div class="pet-image" style="background-image: url(mumbaiimg.png)"></div>
                    <div class="pet-info">
                        <span>See Available Pets</span>
                    </div>
                </div>
            </a>


        </div>
    </section>


<footer>
    <div class="footer-content">
        <div class="footer-section about">
            <h3><i class="fas fa-paw"></i> FurBound</h3>
            <p>Connecting loving homes with pets in need since 2024</p>
            <div class="social-links">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
            </div>
        </div>
        <div class="footer-section links">
            <h3>Quick Links</h3>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="adopt.html">Adopt a Pet</a></li>
                <li><a href="aboutus.html">About Us</a></li>
                <li><a href="donate.html">Donate</a></li>
            </ul>
        </div>
        <div class="footer-section contact">
            <h3>Contact Us</h3>
            <p><i class="fas fa-map-marker-alt"></i> 123 Pet Street, Chennai, India</p>
            <p><i class="fas fa-phone"></i> (555) 123-4567</p>
            <p><i class="fas fa-envelope"></i> info@furbound.com</p>
        </div>
    </div>
    <div class="footer-bottom">
        <p>&copy; 2025 FurBound. All rights reserved.</p>
    </div>
</footer>

<script src="script.js"></script>
</body>
</html>