-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdonation.html
More file actions
151 lines (129 loc) · 6.42 KB
/
donation.html
File metadata and controls
151 lines (129 loc) · 6.42 KB
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Donations</title>
</head>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/donation.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<div id="header">
<a href="http://instagram.com"><img class="smlogos" src="images/ig.png" width=40px height=40px></a>
<a href="http://facebook.com"><img class="smlogos" src="images/fb.png" width=40px height=40px></a>
<a href="http://youtube.com"><img class="smlogos" src="images/yt.png" width=40px height=40px></a>
<a href="home.html">
<img src="images/logo.png" id="headerlogo" width="250px" height="100px">
</a>
<a href="contactus.html">
<img src="images/contactusicon.png" id="contactus" width="250px" height="100px">
</a>
</div>
<div id="navigationbar">
<ul>
<li id="firstel"><a class="active" href="home.html">Home</a></li>
<li class="nav"><a href="Places_To_Visit.html">Places To Visit</a></li>
<li class="nav"><a href="booking.html">Book A Holiday</a></li>
<li class="nav"><a href="donation.html">Donate</a></li>
<li class="nav"><a href="events.html">Events</a></li>
</ul>
</div>
<div id="content">
<h1 style="text-align:center">Wildlife Donation</h1>
<p style="text-align:center">Support the endangered animals of Malaysia!</p>
<div id="container">
<div id="video-container">
<video src="videos/endangered.mp4" controls>
</div>
<div id="form-container">
<h2 id="form-header" style="text-align:center">Donation Form</h2>
<form method="post" id="form">
<label for="name">Name</label>
<input type="text" name="name" id="name" required><br>
<label for="email">Email</label>
<input type="text" name="email" id="email" required><br>
<label for="amount">Amount (MYR)</label>
<input type="text" name="amount" id="amount" required>
<label for="frequency">Frequency</label>
<select id="frequency" name="frequency">
<option value="once">One-time</option>
<option value="month">Monthly</option>
<option value="year">Yearly</option>
</select><br>
<label for="card">Card type</label>
<select id="card" name="card">
<option value="visa">Visa</option>
<option value="master">Mastercard</option>
<option value="america">American Express</option>
</select><br>
<label for="number">Card Number</label>
<input type="text" name="number" id="number" required><br>
<label for="month">Expiry Date</label>
<input class="date" type="text" name="month" id="month" required> /
<input class= "date" type="text" name="year" id="year" required><br>
<label for="cvv">CVV/CVV2</label>
<input class="date" type="text" name="cvv" id="cvv" required><br>
<input type="button" value="Donate" id="submitBtn">
</form>
</div>
</div>
<div id="spacer" style="width: 200px; height: 450px; margin-right:0px;"></div>
<div id="accordion">
<h3>Why should I donate?</h3>
<div>
<p>We humans consume all, take all and use up the earth's resources as fast as we can, without thought to the animals who share our world.
Therefore, we should give to the animals because they are always struggling to survive. Many animals in Malaysia, as shown in the video,
are going extinct due to human activities such as poaching or destruction of their habitats. Your donations will allow more protection of
these beloved animals.</p>
</div>
<h3>Where do my donations go?</h3>
<div>
<p>Your donations will go straight to WWF-Malaysia, a non-profit organisation, determined in maintaining and protecting the well-beings of
animals in Malaysia. Established in 1972, WWF-Malaysia is part of WWF, the international conservation organisation. Working to sustain
the natural world for the benefit of people and wildlife, WWF-Malaysia’s efforts to conserve nature focus on six major goals - forests,
oceans, wildlife, food, climate and energy, as well as freshwater – and three key drivers of environmental problems – markets, finance and governance.</p>
</div>
<h3>Top Recent Donors</h3>
<div>
<ol>
<li>Sam Yang RM1000 Monthly</li>
<li>Ma Gee RM800 Monthly</li>
<li>Go Reng RM3000 One-time</li>
</ol>
</div>
</div>
</div>
<div id="footer">
<table>
<tr>
<td rowspan="3" width="30%">
<img src="images/logo.png" width="70%">
</td>
<td width = "25%"><a href="contactus.html"><strong>Contact Us</strong></a></td>
<td class="bold" width="20%"><strong>Getting to Malaysia</strong></td>
<td class="bold"><strong>Follow Us</strong></td>
</tr>
<tr>
<td><a href="About Us.html"><strong>About Us</strong></a></td>
<td>
<a href="http://airasia.com">Flights</a> <br>
</td>
<td rowspan="2">
<a href="http://instagram.com"><img class="smlogos" src="images/ig.png" width=40px height=40px></a>
<a href="http://facebook.com"><img class="smlogos" src="images/fb.png" width=40px height=40px></a>
<a href="http://youtube.com"><img class="smlogos" src="images/yt.png" width=40px height=40px></a>
</td>
</tr>
<tr>
<td><a href="events.html"><strong>Events</strong></a></td>
<td>
<a href="https://www.roughguides.com/malaysia/getting-around/#:~:text=Public%20transport%20in%20Malaysia%20is,connect%20Peninsular%20and%20east%20Malaysia.">Getting Around</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="scripts/donation-script.js"></script>
</body>
</html>