-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
305 lines (273 loc) · 19 KB
/
about.html
File metadata and controls
305 lines (273 loc) · 19 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
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
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Elite</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
<!--font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
#menu ,#dropdown-menu{
font-family: "Montserrat", sans-serif;
}
#logoo{
font-family:"Playfair", serif;
}
.hamburger{
color:#c8a95c;
}
</style>
</head>
<body>
<nav class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-gray-900 to-black shadow-lg border-b border-yellow-400/20">
<div class="container mx-auto px-16">
<div class="flex justify-between items-center py-6">
<a href="./index.html" id="logoo" class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-yellow-200 hover:from-yellow-200 hover:to-yellow-400 transition duration-300">ELITE</a>
<button
id="menu-toggle"
class="hamburger hover:text-blue-600 focus:outline-none md:hidden"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
<div id="menu" class="hidden md:flex md:space-x-4 lg:space-x-8 items-center">
<a href="./index.html" class="text-gray-300 text-center hover:text-yellow-400 transition-all duration-300 hover:scale-105">HOME</a>
<a href="./about.html" class="text-yellow-400 font-medium text-center hover:text-yellow-400 transition-all duration-300 hover:scale-105 border-b-2 border-yellow-400">ABOUT</a>
<a href="./services.html" class="text-gray-300 text-center hover:text-yellow-400 transition-all duration-300 hover:scale-105">SERVICES</a>
<a href="./gallery.html" class="text-gray-300 text-center hover:text-yellow-400 transition-all duration-300 hover:scale-105">GALLERY</a>
<a href="./contact.html" class="text-gray-300 text-center hover:text-yellow-400 transition-all duration-300 hover:scale-105">CONTACT</a>
<a href="./pricing.html" class="bg-yellow-400 text-black px-4 py-1 rounded-full hover:bg-yellow-500 transition-all duration-300 hover:scale-105">PRICING</a>
</div>
</div>
<div id="dropdown-menu" class="hidden flex-col md:hidden space-y-2 bg-black rounded-md shadow-md px-4 py-2">
<a href="./index.html" class="block text-center text-white hover:text-yellow-400 transition">HOME</a>
<a href="./about.html" class="block text-center text-yellow-400 font-medium hover:text-yellow-400 transition border-b-2 border-yellow-400">ABOUT</a>
<a href="./services.html" class="block text-center text-white hover:text-yellow-400 transition">SERVICES</a>
<a href="./gallery.html" class="block text-center text-white hover:text-yellow-400 transition">GALLERY</a>
<a href="./contact.html" class="block text-center text-white hover:text-yellow-400 transition">CONTACT</a>
<a href="./pricing.html" class="block text-center bg-yellow-400 text-black hover:bg-yellow-500 transition rounded-full my-2">PRICING</a>
</div>
</div>
</nav>
<div class="h-20"></div>
<script>
const menuToggle = document.getElementById('menu-toggle');
const dropdownMenu = document.getElementById('dropdown-menu');
menuToggle.addEventListener('click', () => {
dropdownMenu.classList.toggle('hidden');
dropdownMenu.classList.toggle('flex');
});
</script>
<!--Header ends here-->
<!-- ---------------------------------------- -->
<div class="container max-w-7xl mx-auto">
<section id="hero" class="about flex flex-col-reverse justify-center sm:flex-row px-6 items-center gap-8 mb-12 mt-12">
<article class="sm:w-1/2">
<h2 class="max-w-md text-4xl font-bold text-center sm:text-5xl sm:text-left">Elite Events <span class="decor">& Decors</span></h2>
<p class="max-w-md text-xl text-center sm:text-left mt-4">At Elite Events & Decors, we bring your dreams to life by crafting unforgettable experiences for every occasion. Whether it’s an elegant wedding, a vibrant birthday party, a corporate gathering, or a bespoke themed event, our team of creative experts is dedicated to turning your vision into a stunning reality.</p>
</article>
<img class="w-full sm:w-1/2 h-auto sm:h-full sm:shrink-0 sm:object-cover min-h-[400px] md:min-h-full rounded-2xl" src="https://cdn.pixabay.com/photo/2022/01/10/04/37/event-6927353_1280.jpg" alt="about-img">
</section>
<section id="section2" class="about flex flex-col-reverse justify-center sm:flex-row px-6 items-center gap-8 mt-20">
<article class="sm:w-1/2">
<h2 class="max-w-md text-4xl font-bold text-center sm:text-5xl ">We <span class="decor">Specializes in...</span></h2> </article>
</section>
<!--section3-->
<!-- <section id="section3" class="about flex flex-col-reverse justify-center sm:flex-row px-6 items-center gap-8 mt-12">
<article class="sm:w-1/2">
<h2 class="max-w-md sub-head font-bold text-center sm:text-5xl mb-6">Wedding<span class="decor2"> Events</span></h2>
<img class="w-full sm:w-1/2 h-auto sm:h-full sm:shrink-0 sm:object-cover min-h-[400px] md:min-h-full rounded-2xl items-center justify-center" src="https://cdn.pixabay.com/photo/2022/01/10/04/37/event-6927353_1280.jpg" alt="about-img">
</article>
<article class="sm:w-1/2">
<h2 class="max-w-md sub-head font-bold text-left sm:text-5xl mb-6">Wedding<span class="decor2"> Events</span></h2>
<img class="w-full sm:w-1/2 h-auto sm:h-full sm:shrink-0 sm:object-cover min-h-[400px] md:min-h-full rounded-2xl" src="https://cdn.pixabay.com/photo/2022/01/10/04/37/event-6927353_1280.jpg" alt="about-img">
</article>
<article class="sm:w-1/2">
<h2 class="max-w-md sub-head font-bold text-left sm:text-5xl mb-6">Wedding<span class="decor2"> Events</span></h2>
<img class="w-full sm:w-1/2 h-auto sm:h-full sm:shrink-0 sm:object-cover min-h-[400px] md:min-h-full rounded-2xl" src="https://cdn.pixabay.com/photo/2022/01/10/04/37/event-6927353_1280.jpg" alt="about-img">
</article>
</section> -->
<section id="section3" class="about flex flex-col sm:flex-row justify-center items-center px-6 mt-20">
<article class="sm:w-1/3 flex flex-col items-center text-center">
<h2 class="sub-head font-bold mb-6 mt-6 text-2xl md:text-3xl text-yellow-500">Wedding<span class="decor2"> Events</span></h2>
<img class="w-[95%] sm:w-[85%] lg:w-[90%] h-[300px] sm:h-[350px] object-cover rounded-2xl"
src="https://cdn.pixabay.com/photo/2022/01/10/04/37/event-6927353_1280.jpg"
alt="about-img">
<a href="./gallery.html" class="mt-[20px] bg-[#c8a95c] text-white px-6 py-2 rounded-full text-center hover:bg-transparent hover:text-[#c8a95c] border border-[#c8a95c] transition duration-300 inline-block">
More Info
</a>
</article>
<article class="sm:w-1/3 flex flex-col items-center text-center ">
<h2 class="sub-head font-bold mb-6 mt-6 text-2xl md:text-3xl text-yellow-500">Birthday<span class="decor2"> Party</span></h2>
<img class="w-[95%] sm:w-[85%] lg:w-[90%] h-[300px] sm:h-[350px] object-cover rounded-2xl"
src="https://plus.unsplash.com/premium_photo-1681841200807-458beeca3d80?q=80&w=1946&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="about-img">
<a href="./gallery.html" class="mt-[20px] bg-[#c8a95c] text-white px-6 py-2 rounded-full text-center hover:bg-transparent hover:text-[#c8a95c] border border-[#c8a95c] transition duration-300 inline-block">
More Info
</a>
</article>
<article class="sm:w-1/3 flex flex-col items-center text-center">
<h2 class="sub-head font-bold mb-6 mt-6 text-2xl md:text-3xl text-yellow-500">Corporate<span class="decor2"> Events</span></h2>
<img class="w-[95%] sm:w-[85%] lg:w-[90%] h-[300px] sm:h-[350px] object-cover rounded-2xl"
src="https://plus.unsplash.com/premium_photo-1723867267202-169dfe3b197a?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="about-img">
<a href="./gallery.html" class="mt-[20px] bg-[#c8a95c] text-white px-6 py-2 rounded-full text-center hover:bg-transparent hover:text-[#c8a95c] border border-[#c8a95c] transition duration-300 inline-block">
More Info
</a>
</article>
</section>
<!--section4-->
<section id="section4" class="about flex flex-col sm:flex-row justify-center items-center px-6 mt-20 mb-12">
<article class="sm:w-1/3 flex flex-col items-center text-center">
<h2 class="sub-head font-bold mb-6 mt-6 text-2xl md:text-3xl text-yellow-500">Destination<span class="decor2"> Weddings</span></h2>
<img class="w-[95%] sm:w-[85%] lg:w-[90%] h-[300px] sm:h-[350px] object-cover rounded-2xl"
src="https://images.unsplash.com/photo-1726682811289-968611755fca?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="about-img">
<a href="./gallery.html" class="mt-[20px] bg-[#c8a95c] text-white px-6 py-2 rounded-full text-center hover:bg-transparent hover:text-[#c8a95c] border border-[#c8a95c] transition duration-300 inline-block">
More Info
</a>
</article>
<article class="sm:w-1/3 flex flex-col items-center text-center ">
<h2 class="sub-head font-bold mb-6 mt-6 text-2xl md:text-3xl text-yellow-500">Product<span class="decor2"> Launches</span></h2>
<img class="w-[95%] sm:w-[85%] lg:w-[90%] h-[300px] sm:h-[350px] object-cover rounded-2xl"
src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="about-img">
<a href="./gallery.html" class="mt-[20px] bg-[#c8a95c] text-white px-6 py-2 rounded-full text-center hover:bg-transparent hover:text-[#c8a95c] border border-[#c8a95c] transition duration-300 inline-block">
More Info
</a>
</article>
<article class="sm:w-1/3 flex flex-col items-center text-center">
<h2 class="sub-head font-bold mb-6 mt-6 text-2xl md:text-3xl text-yellow-500">Brand<span class="decor2"> Promotions</span></h2>
<img class="w-[95%] sm:w-[85%] lg:w-[90%] h-[300px] sm:h-[350px] object-cover rounded-2xl"
src="https://images.unsplash.com/photo-1569018747791-23c5aaec35c3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="about-img">
<a href="./gallery.html" class="mt-[20px] bg-[#c8a95c] text-white px-6 py-2 rounded-full text-center hover:bg-transparent hover:text-[#c8a95c] border border-[#c8a95c] transition duration-300 inline-block">
More Info
</a>
</article>
</section>
<!--section5-->
<!-- <section id="section5" class="about flex flex-col sm:flex-row justify-center items-center px-6 mt-20">
<article class="sm:w-1/3 flex flex-col items-center text-center ">
<h2 class="sub-head font-bold mb-6 mt-6">Wedding<span class="decor2"> Events</span></h2>
<img class="w-[90%] sm:w-[75%] lg:w-[80%] h-auto rounded-2xl"
src="https://cdn.pixabay.com/photo/2022/01/10/04/37/event-6927353_1280.jpg"
alt="about-img">
<button class="mt-[20px] bg-[#fbb829] text-white px-6 py-2 rounded-full text-center hover-btn1">
More Info
</button>
</article>
<article class="sm:w-1/3 flex flex-col items-center text-center ">
<h2 class="sub-head font-bold mb-6 mt-6">Birthday<span class="decor2"> Party</span></h2>
<img class="w-[90%] sm:w-[75%] lg:w-[80%] h-auto rounded-2xl"
src="https://plus.unsplash.com/premium_photo-1681841200807-458beeca3d80?q=80&w=1946&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="about-img">
<button class="mt-[20px] bg-[#fbb829] text-white px-6 py-2 rounded-full text-center hover-btn1">
More Info
</button>
</article>
<article class="sm:w-1/3 flex flex-col items-center text-center">
<h2 class="sub-head font-bold mb-6 mt-6">Corporate<span class="decor2"> Events</span></h2>
<img class="w-[90%] sm:w-[75%] lg:w-[80%] h-auto rounded-2xl"
src="https://plus.unsplash.com/premium_photo-1723867267202-169dfe3b197a?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="about-img">
<button class="mt-[20px] bg-[#fbb829] text-white px-6 py-2 rounded-full text-center hover-btn1">
More Info
</button>
</article>
</section> -->
<section id="section5" class="about flex flex-col-reverse justify-center sm:flex-row px-6 items-center gap-8 mb-12 mt-20">
<img class="w-full sm:w-1/2 h-auto sm:h-full sm:shrink-0 sm:object-cover min-h-[400px] md:min-h-full rounded-2xl"
src="https://thecyphersagency.com/wp-content/uploads/2023/11/MicrosoftTeams-image-1-970x647.jpg" style="max-height: 400px;" alt="about-img">
<article class="sm:w-1/2">
<h2 class="max-w-md text-4xl font-bold text-center sm:text-5xl sm:text-left">Our<span class="decor"> Values</span></h2>
<p class="max-w-md text-xl text-center sm:text-left mt-4">Trustworthiness is at the core of everything we do. We believe in integrity, honesty, and transparency, and we never take advantage of our clients. Our dedication to ethical practices ensures that your experience with us is nothing short of outstanding.</p>
<!-- <button class="mt-[20px] bg-[#fbb829] text-white px-6 py-2 rounded-full hover-btn1 btn-2 flex justify-center items-center">
Contact Us
</button> -->
</article>
</section>
<!-- <section id="section6" class="about flex flex-col-reverse justify-center sm:flex-row px-6 items-center gap-8 mb-12 mt-20">
<article class="sm:w-1/2">
<h2 class="max-w-md text-4xl font-bold text-center sm:text-5xl sm:text-left">Our <span class="decor"> Team</span></h2>
<p class="max-w-md text-xl text-center sm:text-left mt-4">At the helm of Elite Events and Decor LLC is our CEO and Creative Director, Mr Varun . With his leadership and creative flair, we strive to exceed your expectations and deliver exceptional service with every event.</p>
</article>
<img class="w-full sm:w-1/2 h-auto sm:h-full sm:shrink-0 sm:object-cover min-h-[400px] md:min-h-full rounded-2xl" src="https://cdn.pixabay.com/photo/2022/01/10/04/37/event-6927353_1280.jpg" alt="about-img">
</section> -->
<section id="section6" class="about flex flex-col sm:flex-row justify-center px-6 items-center gap-8 mb-12 mt-20">
<article class="sm:w-1/2">
<h2 class="max-w-md text-4xl font-bold text-center sm:text-5xl sm:text-left">
Our <span class="decor"> Team</span>
</h2>
<p class="max-w-md text-xl text-center sm:text-left mt-4">
At the helm of Elite Events and Decor LLC is our CEO and Creative Director, Mr Varun. With his leadership and creative flair, we strive to exceed your expectations and deliver exceptional service with every event.
</p>
</article>
<img
class="w-full sm:w-1/2 h-auto sm:h-full sm:shrink-0 sm:object-cover min-h-[400px] md:min-h-full rounded-2xl"
src="https://www.pingpongmoments.in/blog/wp-content/uploads/2023/06/Corporate-Event-Management.png"
alt="about-img"
>
</section>
</div>
<footer class="bg-gradient-to-r from-gray-900 to-black text-white py-12">
<div class="max-w-7xl mx-auto px-6">
<div class="grid md:grid-cols-3 gap-12 border-b border-gray-700 pb-8">
<div class="space-y-6">
<h3 class="text-2xl font-semibold text-[#c8a95c]">About Us</h3>
<p class="text-gray-300 leading-relaxed">We specialize in creating unforgettable wedding experiences, tailored to your needs. Let us help you plan your perfect day.</p>
</div>
<div class="space-y-6">
<h3 class="text-2xl font-semibold text-[#c8a95c]">Quick Links</h3>
<ul class="space-y-4">
<li><a href="./about.html" class="text-gray-300 hover:text-[#c8a95c] transition duration-300">About</a></li>
<li><a href="./services.html" class="text-gray-300 hover:text-[#c8a95c] transition duration-300">Services</a></li>
<li><a href="./gallery.html" class="text-gray-300 hover:text-[#c8a95c] transition duration-300">Gallery</a></li>
<li><a href="./contact.html" class="text-gray-300 hover:text-[#c8a95c] transition duration-300">Contact Us</a></li>
</ul>
</div>
<div class="space-y-6">
<h3 class="text-2xl font-semibold text-[#c8a95c]">Contact Us</h3>
<div class="space-y-4">
<p class="text-gray-300 flex items-center gap-3">
<i class="fas fa-map-marker-alt text-[#c8a95c]"></i>
123 Wedding St, Kochi, India
</p>
<p class="text-gray-300 flex items-center gap-3">
<i class="fas fa-phone text-[#c8a95c]"></i>
8590294332
</p>
<p class="text-gray-300 flex items-center gap-3">
<i class="fas fa-envelope text-[#c8a95c]"></i>
elite@gmail.com
</p>
<div class="flex gap-6 mt-6">
<a href="https://www.facebook.com/" class="text-gray-300 hover:text-[#c8a95c] transition duration-300">
<i class="fab fa-facebook-f text-xl"></i>
</a>
<a href="https://www.instagram.com/" class="text-gray-300 hover:text-[#c8a95c] transition duration-300">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="https://x.com/?lang=en" class="text-gray-300 hover:text-[#c8a95c] transition duration-300">
<i class="fab fa-twitter text-xl"></i>
</a>
</div>
</div>
</div>
</div>
<div class="mt-8 text-center text-gray-400">
<p class="text-sm">© 2024 Elite est(2001). All rights reserved.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.js"></script>
</body>
</html>