-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (186 loc) · 9.49 KB
/
index.html
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<title>PAWMATE</title>
</head>
<body>
<div class="button">
<a href="login/login.html">
<button type = "button">Log in/Signup</button>
</a>
</div>
<!-- Landing Area -->
<section id="landing__area" class="container__center">
<nav class="center__row">
<h1 class="logo"><i class="fas fa-cat"></i> PAWMATE</h1>
<div class="dropdown">
<ul class="center__row">
<li><button><a href="Slider.html">Dogs and Puppies</button></a></li>
<li><button><a href="swipe.html">Cats and Kittens</button></a></li>
<li><a href="#">Others</a></li>
<li><a href="#">Forum</a></li>
<li><a href="adoption guide.html">Adoption Guide</a></li>
</ul>
</div>
</nav>
<div class="searchInput">
<input type="text" placeholder="Search Anything..">
<div class="resultBox">
</div>
<div class="icon"><i class="fas fa-search"></i></div>
</div>
<script>
let suggestions = [
"Cats",
"Dogs",
"Cat Breed",
"Dog Breed",
"American Shorthair",
"Persian Cat",
"Ragdoll",
"Maine Coon",
"Golden Retriever",
"German Shepherd",
"Pomeranian",
"Birds",
"Fish",
"Hamster"
];
// getting all required elements
const searchInput = document.querySelector(".searchInput");
const input = searchInput.querySelector("input");
const resultBox = searchInput.querySelector(".resultBox");
const icon = searchInput.querySelector(".icon");
let linkTag = searchInput.querySelector("a");
let webLink;
// if user press any key and release
input.onkeyup = (e)=>{
let userData = e.target.value; //user enetered data
let emptyArray = [];
if(userData){
emptyArray = suggestions.filter((data)=>{
//filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
return data.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
});
emptyArray = emptyArray.map((data)=>{
// passing return data inside li tag
return data = '<li>'+ data +'</li>';
});
searchInput.classList.add("active"); //show autocomplete box
showSuggestions(emptyArray);
let allList = resultBox.querySelectorAll("li");
for (let i = 0; i < allList.length; i++) {
//adding onclick attribute in all li tag
allList[i].setAttribute("onclick", "select(this)");
}
}else{
searchInput.classList.remove("active"); //hide autocomplete box
}
}
function showSuggestions(list){
let listData;
if(!list.length){
userValue = inputBox.value;
listData = '<li>'+ userValue +'</li>';
}else{
listData = list.join('');
}
resultBox.innerHTML = listData;
}
</script>
<div class="landing__content center__row">
<div class="landing__info align__left">
<h1>
RESCUE.LOVE. <br>
REPEAT.
</h1>
<p>With more adoptable pets than ever, we have an urgent need for pet adopters. Search for dogs, cats, and other available pets for adoption near you.</p>
<button><a href="#/">I want to ADOPT</a></button>
</div>
<div class="image__pet"></div>
</div>
</section>
<!-- HELP -->
<section id="help" class="container__center">
<h1>Find out how to help the animals</h1>
<div class="help__cards--container center__row">
<div class="help__card container__center">
<span class="card__title">Adopting</span>
<h3>Give the animal you love a home</h3>
<p>
"Welcome joy into your life! Our animal adoption program connects you with loving companions eager to share a lifetime of happiness. Whether it's the playful energy of a kitten, the loyalty of a dog, or the gentle purrs of a cat, we have your perfect match. Adoption transforms their world and enriches yours with unconditional love. Join us in creating stories of forever homes and wagging tails. Discover the joy of adoption – where every pawprint leaves an imprint on your heart."</p>
<div class="card__link container__center">
<a href="#">Adopt Now</a>
</div>
</div>
<div class="help__card container__center">
<span class="card__title">Volunteering</span>
<h3>Be part of the team helping the animals</h3>
<p>"Join our team of pet advocates and make a real difference in the lives of furry friends. Whether you're into playtime, cuddles, or spreading the word about pet adoption, we welcome you. Let's create wagging tails, purrs of joy, and find forever homes for our adorable companions. Join us on the heartwarming journey of connecting pets with their perfect families – where love begins with a pawprint."</p>
<div class="card__link container__center">
<a href="#">Join Now</a>
</div>
</div>
<div class="help__card container__center">
<span class="card__title">Charity</span>
<h3>Help the Pets Care Foundation</h3>
<p>"Join our pet adoption charity in spreading love and joy to furry friends and humans alike. Your contribution provides shelter, care, and new beginnings for adorable companions. Help us make a positive impact on pets in need and create a world where every pet has a loving home. Together, let's keep tails wagging and hearts beating with the warmth of companionship. Donate today to make a difference in the lives of our four-legged friends."</p>
<div class="card__link container__center">
<a href="#">Help Now</a>
</div>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<img src="https://vapingdaily.com/wp-content/uploads/2019/03/Man-with-labrador-outdoors.jpg" class="img__gallery" id="img-1" alt="1">
<img src="cat.jpeg" class="img__gallery" id="img-2" alt="2">
<img src="cutedog.avif" class="img__gallery" id="img-3" alt="3">
<img src="https://images.squarespace-cdn.com/content/v1/5246fb63e4b0240948a40520/1440452356949-6A285K6C39FE7F8Y2C37/ke17ZwdGBToddI8pDm48kBtpJ0h6oTA_T7DonTC8zFdZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIWkiAYz5ghgEgSGJuDQ4e1ZKXpRdhEMT7SgthRpD0vyIKMshLAGzx4R3EDFOm1kBS/image-asset.jpeg" class="img__gallery" id="img-4" alt="4">
<img src="https://i0.wp.com/www.techdigest.tv/wp-content/uploads/2014/11/spotify-cat-people.jpg?ssl=1" class="img__gallery" id="img-5" alt="5">
<img src="https://i1.wp.com/movingtips.wpengine.com/wp-content/uploads/2019/08/birds-transporting.jpg?fit=1024%2C684&ssl=1" class="img__gallery" id="img-6" alt="6">
<img src="https://i.pinimg.com/originals/01/f3/11/01f31165f552ca9b5ac6857f6c59fa09.jpg" class="img__gallery" id="img-7" alt="7">
<img src="https://www.bluecross.org.uk/sites/default/files/d8/assets/images/108048.jpg" class="img__gallery" id="img-8" alt="8">
<img src="https://www.petsourcing.com/wp-content/uploads/2018/12/waht-is-the-most-popular-pets-in-Japan-696x602.jpg" class="img__gallery" id="img-9" alt="9">
</section>
<!-- Contact -->
<form>
<div class="form__row">
<input type="text" id="name">
<label for="name">First Name</label>
</div>
<div class="form__row">
<input type="text" id="last-Name">
<label for="last-Name">Last Name</label>
</div>
<div class="form__row">
<input type="email" id="email">
<label for="email">Email</label>
</div>
<div class="form__row">
<input type="number" id="phone">
<label for="phone">Phone</label>
</div>
<div class="form__row">
<textarea id="textarea" cols="30" rows="10" placeholder="Write your message here"></textarea>
</div>
<button type="submit">Send message</button>
</form>
<footer>
<div class="footer__cont center__row">
<p>PAWMATE</p>
<div>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</footer>
</body>
</html>