Petimony/search.html at main · Yamuna-b/Petimony · 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
136
137
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Pets | Petimony</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <div class="navigation-menu">
            <div class="logo">
                <img src="logo/2.png" alt="Logo">
            </div>
            <div class="header">
                <h1>Petimony</h1>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="search.html">Search</a></li>
                    <li><a href="pet_profile.html">Pet Profile</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <section class="search-page">
        <h2>Search for Your Perfect Pet</h2>
        <p>Find the best pet companion for you by searching based on breed, age, and personality.</p>

        <input type="text" class="search-bar" placeholder="Search by breed, name, or personality...">

        <div class="search-results">
            <div class="pet-card">
                <img src="pets/1.jpg" alt="Chicken Chintamani">
                <h3>Chicken Chintamani</h3>
                <p>Age: 2 years | Personality: Energetic and playful.</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/2.jpg" alt="Nallaven">
                <h3>Nallaven</h3>
                <p>Age: 3 years | Personality: Calm and elegant.</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/3.jpg" alt="Pachakannu Parasu">
                <h3>Pachakannu Parasu</h3>
                <p>Age: 1.5 years | Diplomatic Thalaivar | Personality: Talkative and cheeky.</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/4.jpg" alt="Ariana">
                <h3>Ariana</h3>
                <p>Age: 4 years | Personality: Loyal and friendly.</p>
                <a href="contact.html">View Details</a>
            </div>

            <div class="pet-card">
                <img src="pets/9.jpg" alt="Nura">
                <h3>Nura</h3>
                <p>Age: 1.5 years | Baby Pig | Naughty | Personality: Cute and loyal.</p>
                <a href="contact.html">View Details</a>
            </div>

            <div class="pet-card">
                <img src="pets/14.jpg" alt="Virat Kohli ">
                <h3>Virat Kohli</h3>
                <p>Age: 2 years | Captain of chaos | Runs faster than Wi-Fi</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/11.jpg" alt="Biri">
                <h3>Biri</h3>
                <p>Age: 55 years | Beauty | Personality: Bold and loving.</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/6.jpg" alt="Molu Molu Meen">
                <h3>Molu Molu Meen</h3>
                <p>Age: 3 years | Vocabulary Vault | Drops lines smoother than velvet.</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/5.jpg" alt="Vanakkam da mapla">
                <h3>Vanakkam da mapla</h3>
                <p>Age: 2 years | Personality: Strong and protective.</p>
                <a href="contact.html">View Details</a>
            </div>

            <div class="pet-card">
                <img src="pets/7.jpg" alt="Kochi Karuppu">
                <h3>Kochi Karuppu</h3>
                <p>Age: 1 year | Personality: Bold and protective.</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/8.jpg" alt="Cupcake Kundhanis">
                <h3>Cupcake Kundhanis</h3>
                <p>Age: 2 years | Personality: Curious and playful.</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/10.jpg" alt="Chintu Ladu">
                <h3>Chintu Ladu</h3>
                <p>Age: 3 years | Personality: Friendly and energetic.</p>
                <a href="contact.html">View Details</a>
            </div>

            <div class="pet-card">
                <img src="pets/12.jpg" alt="Maya Biryani">
                <h3>Maya Biryani</h3>
                <p>Age: 2 years | Personality: Curious and playful.</p>
                <a href="contact.html">View Details</a>
            </div>
            <div class="pet-card">
                <img src="pets/13.jpg" alt="Chill Guy">
                <h3>Chill Guy</h3>
                <p>Age: 3 years | Focus on Chilling</p>
                <a href="contact.html">View Details</a>
            </div>

            <div class="pet-card">
                <img src="pets/15.jpg" alt="Orakannu Obama">
                <h3>Orakannu Obama</h3>
                <p>Age: 2 years | Diplomatic Thalaivar</p>
                <a href="contact.html">View Details</a>
            </div>
        </div>
    </section>
    <footer>
        <p>&copy; 2024 Petimony | All Rights Reserved</p>
    </footer>
</body>
</html>