-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathxx.html
More file actions
172 lines (150 loc) · 5.85 KB
/
Copy pathxx.html
File metadata and controls
172 lines (150 loc) · 5.85 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoo Parc</title>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Link to New CSS -->
<link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="style/scroll up music.css">
<link rel="stylesheet" href="style/ticket-btn.css">
<link rel="stylesheet" href="style/map-btn.css">
<link rel="stylesheet" href="style/loader.css">
<script src="js/loader.js" defer></script>
<script src="js/audio.js" defer></script>
<script src="js/upbtn.js" defer></script>
<style>
/* Import desired fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Bree+Serif&family=Lobster&display=swap');
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
h1 {
font-size: 70px !important; /* Force the font size to apply */
color: #ffcc00;
text-align: center;
font-family: 'Pacifico', 'Lobster', 'Bree Serif', 'Arial', sans-serif; /* Multiple fonts for fallback */
margin-top: 1px;
padding: 1px;
border-radius: 1px;
display: inline-block;
text-shadow:
0 0 1px #000000,
0 0 10px #fffef9,
0 0 20px #ECDFCC,
0 0 30px #ffffff,
0 0 40px #ECDFCC,
0 0 50px #ffffff;
animation: blink 0.09s infinite; /* Adjusted animation for a smoother effect */
}
</style>
</head>
<body>
<header>
<div class="header-container">
<a href="index.html" class="logo">
<img src="img/logo.png" alt="Zoo Parc Logo">
</a>
<div class="title-nav">
<h1>Zoo Parc
</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li>
<div class="nav-item home-item">
<a href="index.html" class="home-button"style="color: #ffcc00;">Home</a>
<div class="animal-animation">
<img src="img/lion.gif" class="animal" alt="lion Animation">
</div>
</div>
</li>
<li><a href="AboutUs.html">About Us</a></li>
<li><a href="Events.html">Events</a></li>
<li><a href="Gallery.html">Gallery</a></li>
<li><a href="FoodOutlets.html">Dining</a></li>
<li><a href="registration.php">Volunteer</a></li>
<li><a href="Login.html">Login</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="loader">
<img src="img/logo.png" alt="Zoo Parc Logo">
<p>Loading, please wait...</p>
</div>
</body>
<!-- Enhanced Footer -->
<footer
class="footer">
<div class="footer-content">
</div>
<div class="footer-section links">
</div>
</div>
<br>
<div class="footer-bottom">
<div class="footer-section about">
<div class="social-icons">
<i class="fas fa-leaf icon"></i>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-google-plus"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<i class="fas fa-paw icon"></i> <br>
<p> <br>© 2024 Zoo Parc |
Designed by<a href="https://www.instagram.com/luna.layl_/" class="btn-su"
target="_blank" >Sumalka<i class="fab fa-pagelines icon"></i>
</a></p>
<p>Together, we CAN make a difference! If you'd like to help our wildlife charity,
there are lots of ways you can do so... THANK YOU for your ongoing SUPPORT.</p>
<p>Zoo Parc is home to over 31,000 animals across 128 acres of lush gardens. Come explore and learn about wildlife and conservation efforts.</p>
</div>
</div>
</div>
<div class="quick-links">
<p> Quick-links
<a href="#" class="quick-link-btn">Home</a>
<a href="#" class="quick-link-btn">News</a>
<a href="#" class="quick-link-btn">About Us</a>
<a href="#" class="quick-link-btn">Contact Us</a>
<a href="#" class="quick-link-btn">Our Team</a> </p>
</div>
</footer>
<!-- Scroll to Top Button -->
<div class="scroll-to-top" id="scrollToTop">
<a href="#top" class="scroll-btn">
<i class="fas fa-chevron-up"></i>
</a>
</div>
<!-- Floating Audio Control -->
<div id="audio-control">
<button id="musicPlaying">▶</button> <!-- Play Icon -->
<audio id="background-music" loop>
<source src="images/mp3.mp3" type="audio/mpeg">
browser not support the audio
</audio>
</div>
<!-- Floating ticket Button -->
<div class="floating-cart">
<a href="Tickets.html" class="cart-btn">
<img src="img/ticket-icon.png" alt="Buy Ticket">
</a>
<!-- Floating Map Button -->
<div class="floating-map">
<a href="ZooMap.html" class="map-btn">
<img src="img/map.gif" alt="Zoo Map">
</a>
</html>