-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
319 lines (247 loc) · 16.6 KB
/
index.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
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
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpport" content="width=device-width, initial-scale=1.0" >
<title>Nova Luxe Events</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="images/favicon.ico">
</head>
<body>
<div id="main">
<div class="width-container">
<div class="header">
<div class="logo">
<img src="images/black logo.jpg"alt="novaluxuryevents" width="400" height="180" >
</div>
<div class="header-content">
<div>
<h1>Nova Luxury Events</h1>
<p> bespoke luxury event planner</p>
</div>
</div>
</div>
<div class="sidenav" id="mySidenav">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#aboutus">About Us</a>
<a href="#engageus">Engage Us</a>
<a href="#contacts"> Our Contacts</a>
<button class="closebtn">x</button>
</div>
<span onclick="openNav()" class="opennav">(op)</span>
<div class="bg-image" id="bg-image"></div>
<div class="container">
<p id="pg"> Sure! Imagine an opulent oasis where every detail is meticulously curated to exude elegance and sophistication.<br/>
Our <strong>luxury Events</strong> and <strong>Decor</strong> company specializes in crafting <strong>unforgettable experiences</strong> tailored to our discerning <br/> clients' desires.
From lavish weddings to exclusive corporate events, we transform venues into enchanted realms, blending <br/>sumptuous décor
exquisite floral arrangements, and bespoke elements to create magical moments that linger in memory forever.
</p>
<div class="container1">
<div class="image-container">
<img src="images/Screenshot (993).png" alt="novaluxuryevents" width="225" height="305"> <br>
</div>
<div class="linkcontainer">
follow us on Tik Tok @<a href="https://www.tiktok.com/@novaluxuryevents">novaluxuryevents</a> <br>
follow us on Instagram @<a href="https://www.instagram.com/novaluxuryeventske/">novaluxuryeventske</a> <br>
chat with us on WhatsApp <a href="https://www.whatsapp.com/">WA link goes here!</a>
</div>
</div>
<p id="p with id">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere tenetur nulla accusamus qui quia non nihil sequi dolorem at facilis tempora a <br/>
reiciendis harum nemo inventore impedit nihil magni expedita! Sed vel perferendis temporibus a molestiae ducimus pariatur officia! Quod repell <br/>
eos velit itaque, nobis modi doloribus excepturi accusantium debitis. Accusantium, architecto inventore iusto, nisi nulla, ratione est iste!</p>
<!---tian is jus brainstorming-->
<div class="columncontainer">
<div class="cointainer">
<h3><strong>about us</strong></h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
el sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
incidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
odi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
ecusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
vel sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
incidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
recusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
vel sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
incidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
recusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
vel sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
incidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
recusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
ncidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
recusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
</div>
<div class="container">
<h3><strong>services</strong></h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
el sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
incidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
recusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
vel sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
incidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
recusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
vel sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
incidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
recusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
vel sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
idunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
ecusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore atque, eius iusto
vel sequi accusamus laboriosam, incidunt quas repellendus, dicta eum qui id. Voluptate,
ncidunt impedit! Consectetur veritatis odio quisquam corporis dignissimos amet autem
modi in asperiores distinctio praesentium odit optio mollitia illum incidunt eveniet
cusandae placeat dolore non officia, molestias, beatae vitae temporibus nesciunt!</p>
</div>
</div>
<div>
<div>
<h3><strong>reviews</strong></h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum eligendi,
dicta deserunt dolores eveniet incidunt sapiente suscipit ullam quos numquam officia necessitatibus,
praesentium in labore tempore vel quisquam nobis iste.</p>
</div>
</div>
<div class="wrapper">
<div class="items">
<div class="item" style="background-image: url(images/photo_2024-06-21_09-11-41.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-11-44.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-11-59.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-12-07.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-13-21.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-12-20.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-12-58.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-13-10.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-12-36.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-12-45.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-12-48.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-12-53.jpg)"></div>
<div class="item" style="background-image: url(images/photo_2024-06-21_09-12-24.jpg)"></div>
</div>
</div>
<p>You can customise youe desired event to give us a general idea of your dream event.
Note you only fill this form for booking <br> purposes and to give us a where and what of your event so that we can come up with ways to give you a bespoke event.</p>
<div>
<form class="form" id="bookingform" method="">
<h4>please fill out this inquiry form as part of the booking process</h4>
<div class="input">
<label for="fnames">Full names</label>
<input type="text" id="fnames" name="fnames" value="Full Names">
</div>
<div class="input">
<!-- <div class="form-container"> -->
<label for="type of event desired">Type of Event Desired</label>
<select id="type of event desired" class="options">
<option value="baby showers">Baby Showers</option>
<option value="gender reveals">Gender Reveals</option>
<option value="birthdays">Birthdays</option>
<option value="weddings">Weddings</option>
<option value="corporate events">Corporate Events</option>
<option value="concerts">Concerts</option>
<option value="cultural events">Cultural Events</option>
<option value="other custom event">Other Custom Event</option>
</select>
<div class="output" id="type of event desired"></div>
<!-- </div> -->
</div>
<div class="input">
<!-- <div class="form-container"> -->
<label for="venue">Venue</label>
<select id="venue" class="options">
<option value="maline gardens">Maline Gardens</option>
<option value="Canivore grounds">Canivore Grounds</option>
<option value="wisndsor pavillion">Wisndsor Pavillion</option>
<option value="thika greens">Thika Greens</option>
<option value="paradise lost">Paradise Lost</option>
<option value="naishola gardens">Naishola Gardens</option>
<option value="park hills">Park hills</option>
<option value="other custom venue">Other Custom Venue</option>
</select>
<div class="output" id="venue"></div>
<!-- </div> -->
</div>
<div class="input">
<label for="no of guests">No of Guests</label>
<input type="number" id="no of guests" name="no of guests" value="no of guests">
</div>
<div class="input">
<label for="special requests">Special requests</label>
<input type="text" id="special requests" name="special requests" value="special requests">
</div>
<div class="input">
<label for="date">Date</label>
<input type="date" id="events" name="date">
</div>
<div class="input">
<label for="email address">Email Address</label>
<input type="text" id="email address" name="email address" value="example@gmail.com">
</div>
<!-- use (type="email")to validate email addresses-->
<div class="input">
<button type="submit" class="button"><p id="button-txt">Book</p></button>
</div>
</form>
</div>
<script>
document.querySelector(".button").addEventListener("click", ()=>{
document.getElementById("button-txt").innerHTML = "booked"
})
</script>
</div>
<br><br>
<div class="contact-container">
<p><b>contact us</b></p> <br><br>
<div class="cc2">
<div class="linkcontainer">
<a target="_blank" href="https://www.tiktok.com/@novaluxuryevents"><i class="fa-brands fa-tiktok" id="icons"></i></a>
<a target="_blank" href="https://www.instagram.com/novaluxuryeventske/"><i class="fa-brands fa-instagram" id="icons"></i></a>
<a target="_blank" href="https://www.whatsapp.com/"><i class="fa-brands fa-whatsapp" id="icons"></i></a>
<a target="_blank" href="https://www.youtube.com/"><i class="fa-brands fa-youtube" id="icons"></i></a>
<a target="_blank" href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin-in" id="icons"></i></a>
<a target="_blank" href="https://x.com/"><i class="fa-brands fa-x-twitter" id="icons"></i></a>
<a target="_blank" href="https://www.facebook.com/"><i class="fa-brands fa-facebook" id="icons"></i></a>
<a target="_blank" href="https://accounts.google.com/v3/signin/identifier?continue=https://mail.google.com/mail/&service=mail&theme=glif&flowName=GlifWebSignIn&flowEntry=ServiceLogin"><i class="fa-regular fa-envelope" id="icons"></i></a>
</div>
<br>
<div>
<div>
<p>+254 763-957-781</p>
<p>+254 706-734-591</p>
</div>
<div>
<p>P.O. Box. 2263-00618</p>
<p>Ruaraka.</p>
</div>
<div>
<p>2nd Mezzanine floor, Akai Complex,</p>
<p>237 Garden Estate road, Nairobi, Kenya.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="index.js"></script>
<script src="https://kit.fontawesome.com/4f07661985.js" crossorigin="anonymous"></script>
<script src="carousell script.js"></script>
<script src="sidenav.js"></script>
</html>
</div>
</body>
</html>