forked from anuragverma108/WildGuard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmoreevents.html
266 lines (245 loc) · 7.83 KB
/
moreevents.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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our Events - World Animals Life</title>
<link rel="stylesheet" href="styles.css" />
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 0;
position: relative;
}
.back-button {
position: absolute;
top: 20px;
right: 20px;
background-color: #91be55; /* New color */
color: white;
border: none;
border-radius: 4px;
padding: 10px 15px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s;
}
.back-button:hover {
background-color: #78a848; /* Darker shade for hover */
}
.section {
padding: 40px 20px;
background-color: #e0f7fa;
}
.section-title {
text-align: center;
color: #00695c;
margin-bottom: 30px;
font-size: 2.5em;
}
.event-card {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin: 20px 0;
padding: 20px;
transition: transform 0.2s;
}
.event-card:hover {
transform: translateY(-5px);
}
.event-title {
color: #91be55; /* New color */
margin-bottom: 10px;
font-size: 1.8em;
}
.event-date,
.event-location {
color: #00796b;
margin: 5px 0;
}
.event-description {
margin: 15px 0;
line-height: 1.6;
}
.event-actions {
text-align: center;
}
.btn {
background-color: #91be55; /* New color */
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #78a848; /* Darker shade for hover */
}
.btn-secondary {
background-color: #ffa000;
}
.btn-secondary:hover {
background-color: #ff8f00;
}
</style>
</head>
<body>
<!-- Back Button -->
<button class="back-button" onclick="location.href='index.html';">
Back
</button>
<!-- Events Section -->
<section class="section events" id="events">
<div class="container">
<h2 class="section-title">Upcoming Events</h2>
<!-- Event 1 -->
<div class="event-card">
<div class="event-details">
<h3 class="event-title">Animal Conservation Workshop</h3>
<p class="event-date">
<ion-icon name="calendar-outline"></ion-icon>
October 20, 2024
</p>
<p class="event-location">
<ion-icon name="location-outline"></ion-icon>
New York City, NY
</p>
<p class="event-description">
Join us for a day-long workshop focusing on the latest strategies
in wildlife conservation. Experts will share their insights on
protecting endangered species and promoting sustainability in
habitats.
</p>
</div>
<div class="event-actions">
<button class="btn" onclick="location.href='register.html';">
Register Now
</button>
</div>
</div>
<!-- Event 2 -->
<div class="event-card">
<div class="event-details">
<h3 class="event-title">World Animal Day Celebration</h3>
<p class="event-date">
<ion-icon name="calendar-outline"></ion-icon>
November 3, 2024
</p>
<p class="event-location">
<ion-icon name="location-outline"></ion-icon>
Virtual Event
</p>
<p class="event-description">
Celebrate World Animal Day with us! Tune in to our virtual event
where you can participate in interactive talks with wildlife
experts, learn about animal conservation, and donate to support
our mission.
</p>
</div>
<div class="event-actions">
<button class="btn" onclick="location.href='event-details.html';">
Learn More
</button>
</div>
</div>
<!-- Event 3 -->
<div class="event-card">
<div class="event-details">
<h3 class="event-title">Wildlife Charity Gala</h3>
<p class="event-date">
<ion-icon name="calendar-outline"></ion-icon>
December 10, 2024
</p>
<p class="event-location">
<ion-icon name="location-outline"></ion-icon>
Los Angeles, CA
</p>
<p class="event-description">
Join us for our annual Wildlife Charity Gala in Los Angeles, where
we raise funds to support endangered species. The event will
feature a silent auction, dinner, and keynote speakers from the
wildlife conservation community.
</p>
</div>
<div class="event-actions">
<button class="btn" onclick="location.href='event-details.html';">
Buy Tickets
</button>
</div>
</div>
<!-- Past Events Section -->
<h2 class="section-title">Past Events</h2>
<!-- Past Event 1 -->
<div class="event-card">
<div class="event-details">
<h3 class="event-title">Wildlife Rescue Fundraiser</h3>
<p class="event-date">
<ion-icon name="calendar-outline"></ion-icon>
August 15, 2024
</p>
<p class="event-location">
<ion-icon name="location-outline"></ion-icon>
San Francisco, CA
</p>
<p class="event-description">
Our Wildlife Rescue Fundraiser in San Francisco was a great
success! Thanks to all our generous donors, we raised over $50,000
for animal rescue operations and conservation programs across the
globe.
</p>
</div>
<div class="event-actions">
<button
class="btn btn-secondary"
onclick="location.href='event-details.html';"
>
View Photos
</button>
</div>
</div>
<!-- Past Event 2 -->
<div class="event-card">
<div class="event-details">
<h3 class="event-title">Environmental Education Conference</h3>
<p class="event-date">
<ion-icon name="calendar-outline"></ion-icon>
July 30, 2024
</p>
<p class="event-location">
<ion-icon name="location-outline"></ion-icon>
London, UK
</p>
<p class="event-description">
The Environmental Education Conference brought together teachers,
activists, and environmentalists to discuss the future of
environmental education and the role of wildlife conservation in
our curriculum.
</p>
</div>
<div class="event-actions">
<button
class="btn btn-secondary"
onclick="location.href='event-details.html';"
>
Read Summary
</button>
</div>
</div>
</div>
</section>
</body>
</html>