-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathServices.html
executable file
·276 lines (249 loc) · 14.8 KB
/
Services.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Service</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> -->
<link rel="stylesheet" href="libs/css/services.css">
<link rel="shortcut icon" href="images/logo/logo_ibento.png">
</head>
<body>
<div id="loader"></div>
<style>
#loader {
position: fixed;
width: 100%;
height: 100vh;
z-index: 1;
overflow: visible;
background: url('loader.gif') no-repeat center center;
}
</style>
<script type="text/javascript">
var loader;
function loadNow(opacity) {
if(opacity <= 0) {
displayContent();
}
else {
loader.style.opacity = opacity;
window.setTimeout(function() {
loadNow(opacity - 0.05)
}, 10);
}
}
function displayContent() {
loader.style.display = 'none';
document.getElementById('content').style.display = 'block';
}
document.addEventListener("DOMContentLoaded", function() {
loader = document.getElementById('loader');
loadNow(1);
});
</script>
<div class="slide active">
<div class="card">
<div class="card-img">
<img class="img img-responsive" src="images/service/img_01.jpg" alt="Corporate">
</div>
<div class="card-content">
<p class="card-theme">Service ::1::</p>
<h2 class="card-header" style="font-size:7vw;">Corporate</h2>
<p class="card-para"><strong>A corporate event can be defined as a gathering that is sponsored by a business for its employees, business partners, clients and/or prospective clients. These events can be for larger audiences such as conventions or smaller events like conferences, meetings or holiday parties.</strong></p>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<div class="card-img">
<img src="images/service/img_02.jpg" alt="Conference">
</div>
<div class="card-content">
<p class="card-theme">Service ::2::</p>
<h2 class="card-header" style="font-size:7vw;">Conference</h2>
<p class="card-para">Conferences are among the most important events that professional event managers organize. The term “conferences” can apply to a variety of gatherings from a group of researchers who meet to discuss scientific results to a group of sales people who are training.
<br>
Conference planning can be the responsibility of a corporate employee or a professional meeting planner.
</p>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<div class="card-img">
<img src="images/service/img_03.jpg" alt="Seminar">
</div>
<div class="card-content">
<p class="card-theme">Service ::3::</p>
<h2 class="card-header" style="font-size:7vw;">Seminar</h2>
<p class="card-para">Who says learning ends outside the classroom? A popular source of academic, professional or technical instruction, seminars present information to diverse audiences. These tutorials may be private or public, series or single, commercial or informative, lecture- or dialogue-based. They are less formal than academic lectures, allowing audience members to interject opinions or discuss results.</p>
</div>
</div>
</div>
<div class="slide ">
<div class="card">
<div class="card-img">
<img src="images/service/img_04.jpg" alt="Exhibition">
</div>
<div class="card-content">
<p class="card-theme">Service ::4::</p>
<h2 class="card-header" style="font-size:7vw;">Exhibition</h2>
<p class="card-para">A corporate event can be defined as a gathering that is sponsored by a business for its employees, business partners, clients and/or prospective clients. These events can be for larger audiences such as conventions or smaller events like conferences, meetings or holiday parties.</p>
</div>
</div>
</div>
<div class="slide ">
<div class="card">
<div class="card-img">
<img src="images/service/img_05.jpg" alt="Wedding">
</div>
<div class="card-content">
<p class="card-theme">Service ::5::</p>
<h2 class="card-header" style="font-size:7vw;">Wedding</h2>
<p class="card-para">Supported by highly accomplished crew of employees, we are rendering Wedding Theme Decoration Management Service. These provided services are delivered under the stern supervision of adroit personnel as per set industry principles. In addition to this, these provided services are attributed amid our client for reliability and cost effectiveness.</p>
</div>
</div>
</div>
<div class="slide ">
<div class="card">
<div class="card-img">
<img src="images/service/img_06.jpg" alt="Product Launch">
</div>
<div class="card-content">
<p class="card-theme">Service ::6::</p>
<h2 class="card-header" style="font-size:5vw;">Product Launch</h2>
<p class="card-para">A launch event is an excellent way to showcase your latest product, build hype around it, and even acquire some sales right at the event. The more you can get people talking about the product, both at the event and via social media, the better it’s going to do. Here are a few tips to better your product launch event planning.</p>
</div>
</div>
</div>
<div class="slide ">
<div class="card">
<div class="card-img">
<img src="images/service/img_07.jpg" alt="Promotion">
</div>
<div class="card-content">
<p class="card-theme">Service ::7::</p>
<h2 class="card-header" style="font-size:7vw;">Promotion</h2>
<p class="card-para">Promotion is a necessity for any event as the means of informing interested people that an event will take place. Promotion requires a focused application of organization, branding and outreach, and is dependent upon defining an interested demography. Proper promotion also relies on correct information about the event and the event sponsors.</p>
</div>
</div>
</div>
<div class="slide ">
<div class="card">
<div class="card-img">
<img src="images/service/img_08.jpg" alt="Incentive Tour">
</div>
<div class="card-content">
<p class="card-theme">Service ::8::</p>
<h2 class="card-header" style="font-size:5vw;">Incentive Tour</h2>
<p class="card-para">Event management of incentive travel events that motivate your employees and customers. Incentive travel is an event category that targets to motivate both key personnel and customers. Imagine sunning yourself on a beach in Jamaica or snow skiing in the Alps. Then imagine that your trip is completely free. Many companies use incentive travel as a marketing tool. These trips can range from a week in an exotic location to a weekend getaway in nearby resort.</p>
</div>
</div>
</div>
<div class="slide ">
<div class="card">
<div class="card-img">
<img src="images/service/img_09.jpg" alt="Award">
</div>
<div class="card-content">
<p class="card-theme">Service ::9::</p>
<h2 class="card-header" style="font-size:6vw;">Award</h2>
<p class="card-para">Event Management of Award Ceremonies that honor staff or acquire and customers. Award Ceremonies are an important type of events when you consider that we live in a society that loves to honor people for their achievements. Some of the most watched programs on television are award ceremonies including the Oscars, the Grammy’s and the Olympics. Companies, organizations and other groups love to honor their own. These ceremonies are coordinated by in-hour meeting or marketing professionals or outside companies.</p>
</div>
</div>
</div>
<div class="slide ">
<div class="card">
<div class="card-img">
<img src="images/service/img_10.jpg" alt="Entertainment">
</div>
<div class="card-content">
<p class="card-theme">Service ::10::</p>
<h2 class="card-header" style="font-size:7vw;">Entertainment</h2>
<p class="card-para">Event Organizers For Rock Band. Our enterprise is one of the renowned Event Organizers For Rock Band. We organize a wide range of events such as birthday, wedding, wedding anniversary, musical shows and corporate events. Our team consists of qualified event planners, procurement agents and other professionals.</p>
</div>
</div>
</div>
<div class="prevnext">
<button class="pn-btn" id="prev"></button>
<button class="pn-btn" id="next"></button>
</div>
<script type="text/javascript">
var $activeSlide = $('.active'),
$homeSlide = $(".slide"),
$slideNavPrev = $("#prev"),
$slideNavNext = $("#next");
function init() {
TweenMax.set($homeSlide.not($activeSlide), {autoAlpha: 0});
TweenMax.set($slideNavPrev, {autoAlpha: 0.2});
}
init();
function goToNextSlide(slideOut, slideIn, slideInAll) {
var t1 = new TimelineLite(),
slideOutContent = slideOut.find('.card-content'),
slideInContent = slideIn.find('.card-content'),
slideOutImg = slideOut.find('.card-img'),
slideInImg = slideIn.find('.card-img'),
index = slideIn.index(),
size = $homeSlide.length;
console.log(index);
if(slideIn.length !== 0) {
t1
.set(slideIn, {autoAlpha: 1, className: '+=active'})
.set(slideOut, {className: '-=active'})
.to(slideOutContent, 0.65, {y: "+=40px", ease: Power3.easeInOut}, 0)
.to(slideOutImg, 0.65, {backgroundPosition :'bottom', ease: Power3.easeInOut}, 0)
.to(slideInAll, 1, {y: "-=100%", ease: Power3.easeInOut}, 0)
.fromTo(slideInContent, 0.65, {y: '-=40px'}, {y : 0, ease: Power3.easeInOut}, "-=0.7")
.fromTo(slideInImg, 0.65, {backgroundPosition: 'top'}, {backgroundPosition: 'bottom', ease: Power3.easeInOut}, '-=0.7')
}
TweenMax.set($slideNavPrev, {autoAlpha: 1});
if(index === size - 1){
TweenMax.to($slideNavNext, 0.3, {autoAlpha: 0.2, ease:Linear.easeNone});
}
};
$slideNavNext.click(function(e) {
e.preventDefault();
var slideOut = $('.slide.active'),
slideIn = $('.slide.active').next('.slide'),
slideInAll = $('.slide');
goToNextSlide(slideOut, slideIn, slideInAll);
});
function goToPrevSlide(slideOut, slideIn, slideInAll) {
var t1 = new TimelineLite(),
slideOutContent = slideOut.find('.card-content'),
slideInContent = slideIn.find('.card-content'),
slideOutImg = slideOut.find('.card-img'),
slideInImg = slideIn.find('.card-img'),
index = slideIn.index(),
size = $homeSlide.length;
if(slideIn.length !== 0) {
t1
.set(slideIn, {autoAlpha: 1, className: '+=active'})
.set(slideOut, {className: '-=active'})
.to(slideOutContent, 0.65, {y: "-=40px", ease: Power3.easeInOut}, 0)
.to(slideOutImg, 0.65, {backgroundPosition :'top', ease: Power3.easeInOut}, 0)
.to(slideInAll, 1, {y: "+=100%", ease: Power3.easeInOut}, 0)
.fromTo(slideInContent, 0.65, {y: '+=40px'}, {y : 0, ease: Power3.easeInOut}, "-=0.7")
.fromTo(slideInImg, 0.65, {backgroundPosition: 'bottom'}, {backgroundPosition: 'top', ease: Power3.easeInOut}, '-=0.7')
}
TweenMax.set($slideNavPrev, {autoAlpha: 1});
if(index === 0){
TweenMax.to($slideNavPrev, 0.3, {autoAlpha: 0.2, ease:Linear.easeNone});
}
};
$slideNavPrev.click(function(e) {
e.preventDefault();
var slideOut = $('.slide.active'),
slideIn = $('.slide.active').prev('.slide'),
slideInAll = $('.slide');
goToPrevSlide(slideOut, slideIn, slideInAll);
});
</script>
</body>
</html>