-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexplore.html
More file actions
156 lines (140 loc) · 8.29 KB
/
explore.html
File metadata and controls
156 lines (140 loc) · 8.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore - Bangalore Explore - Connect with Bangalore's Communities</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation Bar -->
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="communities.html">Communities</a></li>
<li><a href="explore.html" class="active">Explore</a></li>
<li><a href="library.html">Library</a></li>
<li><a href="help.html">Help</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<!-- Explore Section -->
<section id="explore">
<h1>Explore Bangalore's Vibrant Events</h1>
<div class="explore-cards">
<div class="card">
<h2>Bangalore Photography Expedition</h2>
<p>Capture the essence of Bangalore through your lens. A photography tour across the city's most iconic locations.</p>
<a href="#" class="btn" onclick="openModal('photographyModal')">Explore More</a>
</div>
<div class="card">
<h2>Heritage Walk: Bangalore's Historic Sites</h2>
<p>Discover the rich history and architectural marvels of Bangalore. A guided walking tour through the city's most significant landmarks.</p>
<a href="#" class="btn" onclick="openModal('heritageWalkModal')">Register Now</a>
</div>
</div>
</section>
<!-- Modal for Photography Expedition -->
<div id="photographyModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('photographyModal')">×</span>
<h2>Bangalore Photography Expedition</h2>
<p>Explore Bangalore's most photogenic locations with professional photographers. Perfect for both amateurs and professionals.</p>
<h3>Bangalore Photo Highlights</h3>
<div class="event-images">
<img src="https://i.ytimg.com/vi/p3wy-4JxfmE/maxresdefault.jpg" alt="Cubbon Park" class="event-image" onclick="openImageModal('https:www.postoast.com/wp-content/uploads/2021/09/Cubbon-Park-Aerial-view.jpg')">
<img src="http://s3.india.com/travel/wp-content/uploads/2018/02/Vidhan-Soudha-photo-9.jpg" alt="Vidhana Soudha" class="event-image" onclick="openImageModal('http://www.thehistoryhub.com/wp-content/uploads/2014/04/Vidhana-Soudha-Inside.jpg')">
<img src="https://i.redd.it/o79mc85x0mu41.jpg" alt="Bangalore Palace" class="event-image" onclick="openImageModal('https://tse3.mm.bing.net/th?id=OIP.F2Im6BI1xa0yKfLHQgqdPwHaFj&pid=Api&P=0&h=180')">
<img src="https://c8.alamy.com/comp/BM452W/the-lalbagh-botanical-garden-in-bangalore-BM452W.jpg" alt="Lalbagh Botanical Garden" class="event-image" onclick="openImageModal('https://www.urtrips.com/wp-content/uploads/2022/09/lalbagh-botanical-garden-bangalore4.jpg')">
</div>
<h3>Registration</h3>
<form id="photographyRegistrationForm" class="registration-form">
<input type="text" id="photographyName" placeholder="Your Name" required>
<input type="email" id="photographyEmail" placeholder="Your Email" required>
<button type="submit">Register</button>
</form>
<div id="photographyRegistrationSuccess" style="display:none;" class="success-message"></div>
</div>
</div>
<!-- Modal for Heritage Walk -->
<div id="heritageWalkModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('heritageWalkModal')">×</span>
<h2>Heritage Walk: Bangalore's Historic Sites</h2>
<p>Journey through time and explore Bangalore's most significant historical landmarks with expert guides.</p>
<h3>Heritage Locations</h3>
<div class="event-images">
<img src="https://tse2.mm.bing.net/th?id=OIP.1lMziCZETSyGW1-JP16xAgHaE5&pid=Api&P=0&h=180" alt="Tipu Sultan's Palace" class="event-image" onclick="openImageModal('https://images.freeimages.com/images/large-previews/9c0/mysore-palace-tipu-sultan-palace-palace-of-south-indian-india-palace-1143941.jpg')">
<img src="https://i.ytimg.com/vi/YhFuccRIl04/hqdefault.jpg" alt="Krishna Rajendra Market" class="event-image" onclick="openImageModal('https://www.owlstories.in/wp-content/uploads/IMG_1326.jpg')">
<img src="https://i.ytimg.com/vi/QRmA4KMAIwI/maxresdefault.jpg" alt="St. Mark's Cathedral" class="event-image" onclick="openImageModal('https://1.bp.blogspot.com/-sfq5KZzDOXs/WGIHsRcctmI/AAAAAAAAPXw/7wdknVqnl-MzoVBNEk1gxCP83JZrWg_8QCLcB/s1600/02%2BSaint%2BMarks%2BCathedral.jpg')">
<img src="https://i.ytimg.com/vi/z8yDG4_zNLU/maxresdefault.jpg" alt="Bangalore Fort" class="event-image" onclick="openImageModal('https://bangalore247.in/wp-content/uploads/2021/02/Bangalore-Fort.jpg')">
</div>
<h3>Registration</h3>
<form id="heritageWalkRegistrationForm" class="registration-form">
<input type="text" id="heritageWalkName" placeholder="Your Name" required>
<input type="email" id="heritageWalkEmail" placeholder="Your Email" required>
<button type="submit">Register</button>
</form>
<div id="heritageWalkRegistrationSuccess" style="display:none;" class="success-message"></div>
</div>
</div>
<!-- Image Modal -->
<div id="imageModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('imageModal')">×</span>
<img id="fullSizeImage" style="width:100%; max-height:80vh; object-fit:contain;">
</div>
</div>
<!-- Footer Section -->
<footer>
<p>© 2024 Bangalore Explore. All rights reserved.</p>
</footer>
<script>
// Function to open the modal
function openModal(modalId) {
document.getElementById(modalId).style.display = "block";
}
// Function to close the modal
function closeModal(modalId) {
document.getElementById(modalId).style.display = "none";
}
// Open full-size image modal
function openImageModal(imageSrc) {
const imageModal = document.getElementById('imageModal');
const fullSizeImage = document.getElementById('fullSizeImage');
fullSizeImage.src = imageSrc;
imageModal.style.display = "block";
}
// Close modal when clicking outside of it
window.onclick = function(event) {
const modals = document.getElementsByClassName('modal');
for (let i = 0; i < modals.length; i++) {
if (event.target == modals[i]) {
modals[i].style.display = "none";
}
}
}
// Registration form handling
document.getElementById('photographyRegistrationForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('photographyName').value;
const successDiv = document.getElementById('photographyRegistrationSuccess');
successDiv.innerHTML = `${name} has been registered successfully! ✅`;
successDiv.style.display = 'block';
this.reset();
});
document.getElementById('heritageWalkRegistrationForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('heritageWalkName').value;
const successDiv = document.getElementById('heritageWalkRegistrationSuccess');
successDiv.innerHTML = `${name} has been registered successfully! ✅`;
successDiv.style.display = 'block';
this.reset();
});
</script>
</body>
</html>