forked from akshitagupta15june/PetMe
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadopt.html
160 lines (143 loc) · 6.99 KB
/
adopt.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./reportstary.css">
<link rel="stylesheet" href="./navbar.css" />
<!-- <link rel="stylesheet" href="./introSection.css"> -->
<!-- <link rel="stylesheet" href="./mobileView.css"> -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/PetMe/Assets/Images/logo.jpg">
<title>Adopt Me</title>
</head>
<body>
<header
class=" text-gray-400 bg-header-offwhite body-font flex flex-row items-center justify-center lg:justify-around">
<div class="flex flex-row items-center md:flex-row md:items-center p-5" id="logo">
<span class="mission-1"> Saving Lives </span>
<a class="logo-border" href="./index.html">
<img class="rounded-full logo-size" src="./Assets/Images/logo.jpg" alt="logo" />
</a>
<span class="mission-2"> Saving Animals </span>
<!--
<div class="w-full mt-8 md:mt-0">
<h1 class="text-4xl text_2 text-center md:text-left md:ml-12 uppercase font-serif font-bold " id = "heading-adopt-me">Adopt
today!</h1>
<p class="text-lg text-gray-400 text-center md:text-left md:ml-12 mt-2">Give life to a needed animal</p>
</div> -->
</div>
<button data-collapse-toggle="navbar-default" type="button"
class="absolute top-4 right-4 sm:inline-flex sm:items-center p-2 lg:hidden focus:outline-none text_4 "
aria-controls="navbar-default" aria-expanded="false" id="nav-button">
<span class="sr-only">Open Main Menu</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
</svg>
</button>
<nav class="">
<div class="hidden w-full lg:block z-0" id="navbar">
<ul
class="w-[100vw] h-1/2 top-0 right-0 p-4 text-center space-y-8 lg:space-y-0 lg:space-x-3 lg:static lg:w-auto flex flex-col rounded-lg border border-gray-100 items-center lg:bg-transparent lg:border-0 lg:flex-row justify-center">
<li><a href="./index.html"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Home</a></li>
<li><a href="./index.html#About"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">About Us</a>
</li>
<li><a href="./blog.html"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</a></li>
<li><a href="./donate.html"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate
Animals</a></li>
<li>
<div x-data="{ open: false }" @mouseleave="open = false" class="relative">
<a @mouseover="open = true"
class="p-3 text-custom-heading flex font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">
Support Us
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="mt-1">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div x-show="open" class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-100 rounded-md shadow-xl">
<a href="volunteer.html"
class=" block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">Become
a Volunteer</a>
</div>
</div>
</li>
<li><a href="./reportstary.html"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
Report</a></li>
<li><a href="./index.html#contact">
<button
class="inline-flex items-center bg-header-orange-light border-0 py-4 px-2 focus:outline-none text_4 font-bold rounded text-base mt-4 md:mt-0">
Contact Us
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</a>
</li>
<li>
<button id="theme-toggle" class=" text_4">
Toggle Theme
</button>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="info">
<h1 id="title">Adopt Your Favourite Pet</h1>
<p id="description">The details that you provide using this form will be used to reach the nearest </br>authority/organization closest to the location of the pet.</p>
</div>
<form class="sm:w-1/2 h-min mx-auto" id="survey-form" action="https://formspree.io/f/xayaokzl" method="POST">
<div >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required />
</div>
<div class="form-group">
<label for="address">
Street Address | City | Pincode
<span class="hint">(optional)</span>
</label>
<input type="address" name="first address" id="first address" class="form-control"
placeholder="Enter your correct address (eg. Meenawati marg, Lucknow, 209087)" />
</div>
<div class="form-group">
<label for="landmark">
Landmark
<span class="hint">(optional)</span>
</label>
<input type="address" min="1" name="address" id="address" class="form-control"
placeholder="Enter the nearest landmark to identify the location." />
</div>
<div class="form-group">
<label for="landmark">
Contact Number
<span class="hint">(optional)</span>
</label>
<input type="phone" name="tel" id="tel" class="form-control" placeholder="+91 1023456789" oninput="this.value = this.value.replace(/[^0-9\+\.]/g, '').replace(/(\..*)\./g, '$1');"/>
</div>
<div class="form-group">
<button class="block w-full h-min text-center bg-green-500 my-px p-3 rounded" type="submit">Submit</button>
</div>
</div>
</form>
</div>
<script src="./navbar.js"></script>
<script src="./light-dark-theme.js"></script>
</body>
</html>