-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
329 lines (318 loc) · 21.5 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
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fantasy Convention Center</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<!-- Bootstrap CSS Link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Font Awesome Link -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<!-- Vanilla CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header Section -->
<!-------------------- Navbar ------------------ [To keep the navbar top always i put the nav tag before header] --------------->
<nav class="navbar navbar-expand-lg navbar-light bg-light py-lg-3 position-sticky top-0 start-0 shadow">
<div class="container-fluid container-lg">
<div class="logo">
<a class="navbar-brand fw-bold fs-3" href="#"><span class="text-custom">Fantasy</span> Convention Center</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a href="#">Home</a>
</li>
<li class="nav-item">
<a href="#about">About us</a>
</li>
<li class="nav-item">
<a href="#package">Subscribe</a>
</li>
<li class="nav-item">
<a href="#contact">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<!-- Slider -->
<section class="slider">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner-1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption mb-lg-4">
<h1>The Perfect venue for your next event</h1>
<p class="d-none d-sm-block">We have an awesome venue. Which is decorated <br> with colorful lights and many beautiful Craftsmanship.</p>
<a href="https://itsproali.github.io/signup-page/" target="_blank" class=" white-btn py-1 px-2 px-lg-4 py-lg-2">Book Now</a>
</div>
</div>
<div class="carousel-item">
<img src="images/banner-2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption mb-lg-4">
<h1>Perfect venue for your next Corporate event</h1>
<p class="d-none d-sm-block">We have an awesome venue. Which is decorated <br> with colorful lights and many beautiful Craftsmanship.</p>
<a href="https://itsproali.github.io/signup-page/" target="_blank" class="white-btn py-1 px-2 px-lg-4 py-lg-2">Book Now</a>
</div>
</div>
<div class="carousel-item">
<img src="images/banner-3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption mb-lg-4">
<h1>The Perfect venue for your next get together</h1>
<p class="d-none d-sm-block">We have an awesome venue. Which is decorated <br> with colorful lights and many beautiful Craftsmanship.</p>
<a href="https://itsproali.github.io/signup-page/" target="_blank" class="white-btn py-1 px-2 px-lg-4 py-lg-2">Book Now</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</header>
<!-- Main Part -->
<main>
<!-- About Section -->
<section id="about" class="container mx-auto pt-5 mt-lg-5">
<h1 class="text-center py-4"><span class="text-custom">About </span>us</h1>
<div class="row row-cols-1 row-cols-lg-2 g-4 d-flex align-items-center">
<div class="col about-image">
<img class="img-fluid rounded-3" src="images/building.jpg" alt="Convention Center">
</div>
<div class="col aobut-text">
<h1>Fantasy Convention Center</h1>
<p class="fs-5 text-muted">A convention center is a large building that is designed to hold a convention, where individuals and groups gather to promote and share common interests. Convention centers typically offer sufficient floor area to accommodate several thousand attendees. Very large venues, suitable for major trade shows, are sometimes known as exhibition halls. Convention centers typically have at least one auditorium and may also contain concert halls, lecture halls, meeting rooms, and conference rooms.</p>
<a href="https://en.wikipedia.org" target="_blank" class="pink-btn">Explore Now</a>
</div>
</div>
</section>
<!-- Package Section -->
<section id="package" class="position-relative">
<div class="toast show align-items-center toast-border" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex align-items-center">
<img class="img-fluid ps-2" src="images/Vector.svg" alt="Offer">
<div class="toast-body">
20% off on next booking....!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="container mx-auto pt-5 mt-lg-5">
<h1 class="text-center py-5 mb-md-5">Our <span class="text-custom">Packages</span></h1>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4 g-3">
<div class="col">
<div class="card h-100 card-body border-0 shadow-sm">
<h3 class="card-title fw-bold pb-1">$300</h3>
<h3 class="card-title fw-bold">Business fair</h3>
<p class="card-text text-muted">For most businesses event like book fair, craft fair.</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Limited space access</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Security facility</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Event support</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Decoration design</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Per day bill</p>
<a href="https://i.ibb.co/m4DJmnf/thank-you.jpg" target="_blank" class="btn fw-bold text-custom rounded-pill bg-lightsalmon mt-2 choose-btn">Choose Plan</a>
</div>
</div>
<div class="col">
<div class="card h-100 card-body border-0 shadow-sm">
<h3 class="card-title fw-bold pb-1">$500</h3>
<h3 class="card-title fw-bold">Wedding basic</h3>
<p class="card-text text-muted">For wedding with basic plan and limited item</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Full space access</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Food arrangement</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i>Management support</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Decoration design</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Billed as shift</p>
<a href="https://i.ibb.co/m4DJmnf/thank-you.jpg" target="_blank" class="btn fw-bold text-custom rounded-pill bg-lightsalmon mt-2 choose-btn">Choose Plan</a>
</div>
</div>
<div class="col">
<div class="bg-custom special-card card h-100 card-body border-0 shadow position-relative mt-4 mt-md-4 mt-lg-0">
<span class="position-absolute top-0 start-25 translate-middle badge rounded-pill bg-warning">
Best Deal
<span class="visually-hidden">unread messages</span>
</span>
<h3 class="card-title fw-bold pb-1 text-white">$800</h3>
<h3 class="card-title fw-bold text-white">Wedding plus</h3>
<p class="card-text text-white">For most wedding with premium plans.</p>
<p class="text-white py-1 my-0"><i class="fas fa-check-circle text-white"></i> Full space access</p>
<p class="text-white py-1 my-0"><i class="fas fa-check-circle text-white"></i> Full space access</p>
<p class="text-white py-1 my-0"><i class="fas fa-check-circle text-white"></i> Dedicated team</p>
<p class="text-white py-1 my-0"><i class="fas fa-check-circle text-white"></i> Buffed food</p>
<p class="text-white py-1 my-0"><i class="fas fa-check-circle text-white"></i> Premium Decoration</p>
<p class="text-white py-1 my-0"><i class="fas fa-check-circle text-white"></i> Pay as plan</p>
<a href="https://i.ibb.co/m4DJmnf/thank-you.jpg" target="_blank" class="btn fw-bold text-custom bg-white rounded-pill bg-lightsalmon mt-2">Choose Plan</a>
</div>
</div>
<div class="col">
<div class="card h-100 card-body border-0 shadow-sm">
<h3 class="card-title fw-bold pb-1">$1200</h3>
<h3 class="card-title fw-bold">Corporate event</h3>
<p class="card-text text-muted">For most corporate business events</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i>Full space access</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Dedicated team</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Buffed food</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Premium Decoration</p>
<p class="text-muted py-1 my-0"><i class="fas fa-check-circle text-custom"></i> Pay as plan</p>
<a href="https://i.ibb.co/m4DJmnf/thank-you.jpg" target="_blank" class="btn fw-bold text-custom rounded-pill bg-lightsalmon mt-2 choose-btn">Choose Plan</a>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section class="container mx-auto pt-5 mt-lg-5">
<h1 class="text-center py-5 mb-md-5">Happy <span class="text-custom">Clients</span> Says</h1>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col text-center">
<div class="card h-100 border-0 shadow">
<img src="images/person-1.png" class="card-img-top w-25 mx-auto pt-3" alt="Regina Miles">
<div class="card-body">
<h5 class="card-title">Regina Miles</h5>
<h6 class="text-bold">Banker</h6>
<p class="card-text text-muted">These guys are really awesome. I am fully satisfied to see their work.</p>
</div>
</div>
</div>
<div class="col text-center">
<div class="card h-100 border-0 shadow">
<img src="images/person-2.png" class="card-img-top w-25 mx-auto pt-3" alt="Cret Yater">
<div class="card-body">
<h5 class="card-title">Cret Yater</h5>
<h6 class="text-bold">Managing Director</h6>
<p class="card-text text-muted">I am really happy to took their service. They give me many features in reasonable price. Recommended this organization for you.</p>
</div>
</div>
</div>
<div class="col text-center">
<div class="card h-100 border-0 shadow">
<img src="images/person-3.png" class="card-img-top w-25 mx-auto pt-3" alt="Jone Drank">
<div class="card-body">
<h5 class="card-title">Jone Drank</h5>
<h6 class="text-bold">Employee</h6>
<p class="card-text text-muted">I told them to arrange a wedding event. They arranged a dynamic wedding event. This is the best event organizer organization I have ever seen.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Frequently Asked Questions Section -->
<section class="container mx-auto pt-5 mt-lg-5">
<h1 class="text-center py-4">Frequently Asked <span class="text-custom">Questions</span></h1>
<div class="row row-cols-1 row-cols-lg-2 g-4 d-lg-flex align-items-lg-center">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button fw-bold fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What's the different between event design and event planning?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Event design and event planning work hand in hand to deliver a successful event. Events by knight offer tailor made events. This means we incorporate both event design and event planning to create that perfect event.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed fw-bold fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How early do we need to start planning an event
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Planning an event can take from 2 to 4 days, it really depends on the size and the details that the event involves. Having enough time allows you to comfortably cover different areas and prepare yourself for potential scenarios that might happen so you can consider various options prior the date. The only things that need planning are the event elements such as catering, entertainment, technical and venue.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed fw-bold fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
How do you keep budgets on track?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
The simplest way to keep track of your finances, especially your cash, is the low-tech way, with a notebook and a pen. By carrying around the notebook with us, we track exactly where every dollar is going from a small coffee on your way to work to a spending splurge at the mall. If you'd prefer, on a daily or weekly basis, we can transfer our handwritten notes to a computer spreadsheet.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed fw-bold fs-5" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
What is your refund and cancellation policy?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
You may request to cancel your ticket for a full refund, up to 72 hours before the date and time of the event. Cancellations between 25-72 hours before the event may transferred to a different date/time of the same class. Cancellation requests made within 24 hours of the class date/time may not receive a refund nor a transfer. When you register for a class, you agree to these terms.
</div>
</div>
</div>
</div>
<div class="faq-image">
<img class="img-fluid rounded-3" src="images/faq.jpg" alt="Frequently Asked Questions">
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="container mx-auto pt-5 mt-lg-5">
<h1 class="text-center py-4"><span class="text-custom">Contact</span> us</h1>
<div class="contact row row-cols-1 row-cols-lg-2 g-lg-4 d-flex align-items-center">
<div class="col contact-image">
<img class="img-fluid" src="images/contact.jpg" alt="Contact">
</div>
<div class="col form">
<form name="fantasy-convention-center" method="post" netlify class="p-3">
<input class="p-2 mb-2 w-100 d-block" type="text" name="fullname" id="fullname" placeholder="* Enter your Full name..." required>
<input class="p-2 mb-2 w-100 d-block" type="text" name="sub" id="sub" placeholder="* Enter your Subject.." required>
<input class="p-2 mb-4 w-100 d-block" type="email" name="email" id="email" placeholder="* Enter your E-mail...">
<textarea class="w-100 p-3" name="message" id="message" cols="30" rows="8" placeholder="* Messages...."></textarea>
<input class="pink-btn" type="submit" value="Send Message">
</form>
</div>
</div>
</section>
</main>
<!-- Footer Section -->
<footer class="w-100 bg-custom">
<div class="footer d-lg-flex justify-content-between align-items-center py-3 container text-center">
<div class="copyright text-white">
Copyright © 2022 Fantasy | All Rights Reserved
</div>
<div class="ms-auto text-white text-center">
<p>Get the App</p>
<div class="app-link d-flex flex-lg-column flex-md-column align-items-center">
<a href="https://apps.apple.com/us/app/messenger/id454638411" class="border border-2 rounded-3 px-3 py-2 mb-md-2 mx-auto" target="_blank">
<img src="images/app-store.png" class="img-fluid" alt="App Store">
</a>
<a href="https://play.google.com/store/apps/details?id=com.learnprogramming.codecamp&hl=en&gl=US" class="border border-2 rounded-3 px-3 py-2 mx-auto" target="_blank">
<img src="images/play-store.png" class="img-fluid" alt="App Store">
</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS Link -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>