-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
592 lines (536 loc) · 27.4 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
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Motion Lapse</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/grayscale.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Home</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#projects">Our Product</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#signup">Our Team/ Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#info">Additional Information</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#web">Websites</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Motion Lapse</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">Flexible, portable timelapse solutions.</h2>
<a href="#about" class="btn btn-primary js-scroll-trigger">Learn more</a>
</div>
</div>
</header>
<!-- About Us -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Bringing motion timelapses into the new decade</h2>
<p class="text-white-50">The rise of the amateur photographer, coupled with the popularity of portable camera devices calls for the introduction of new motion timelapse products.<br></br>
This product was chosen for development to overcome three main issues with existing motion timelapse devices, namely:
<ul class="text-white-50"><li> One axis movement - Current technologies only allow motion in a single, fixed axis.</li>
<li> Heavy - Current technologies are heavy and bulky, reducing portability.</li>
<li> Expensive - Current technologies are very costly to the end user.</li>
</ul>
<p class="text-white-50"> Motion Lapse therefore aims to deliver high quality, portable and customiseable motion time lapse solutions to the modern amateur photographer.</p>
</div>
</div>
<img src="img/ipad.png" class="img-fluid" alt="Product image">
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects-section bg-light">
<div class="container">
<!-- Featured Project Row -->
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7">
<img class="img-fluid mb-3 mb-lg-0" src="img/bg-masthead(1).png" alt="Picture of motion lapse and action camera assembly">
</div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4>Introducing Motion Lapse</h4>
<p class="text-black-50 mb-0">Motion Lapse relies on a number of key features to provide its revolutionary functionality.
These innovations enable Motion Lapse to perform above the capabilities of current motion time lapse products. </p>
</div>
</div>
</div>
<!-- Project One Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
<img class="img-fluid" src="img/demo-image-01.jpg" alt="Picture of three wheel mechanism">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Three wheel gripping mechanism</h4>
<p class="mb-0 text-white-50">Three preloaded wheels are used to grip the camera track, ensuring stable shots and maneuverability.
The DC motor and gearbox allow up to full vertical movement, while in built control systems ensure steady speed throughout the timelapse.</p>
<hr class="d-none d-lg-block mb-0 ml-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project Two Row -->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="img/demo-image-02.png" alt="Picture of motion lapse LCD screen">
</div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">LCD Screen</h4>
<p class="mb-0 text-white-50">Provides key information such as battery life an time remaining throughout the taking of the timelapse, while control is provided via smartphone.</p>
<hr class="d-none d-lg-block mb-0 mr-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project 4 Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
<img class="img-fluid" src="img/demo-image-03.png" alt="Picture of motion lapse track.">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Track</h4>
<p class="mb-0 text-white-50">Flexible yet strong, the track allows a vast range of shapes to be created, determining the path of the motion time lapse.
The lightweight construction allows for easy transportation and quick setup.</p>
<hr class="d-none d-lg-block mb-0 ml-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project 3 Row -->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="img/bg-masthead(1).png" alt="Motion lapse device picture">
</div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">Packaging</h4>
<p class="mb-0 text-white-50">The Motion lapse is of similar size and weight to the most popular action cameras, while boasting over 6 hours battery life and being ready for the outdoors.
The future of motion time lapse photography is here.</p>
<hr class="d-none d-lg-block mb-0 mr-0">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id='signup' class="contact-section bg-black">
<div class="container">
<div class="col">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Our Team</h2>
<div class="col">
<div class="card py-4 h-100">
<div class="card-body text-center">
<img class="mx-auto rounded-circle" src="img/hooper.jpg" alt="Picture of Alex Hooper">
<div class="small text-white-50">.</div>
<h4 class="text-uppercase m-0">Alex Hooper</h4>
<hr class="my-4">
<div class="small text-black-50">Fourth year Mechanical Engineering student</div>
<div class="small text-white-50">.</div>
<div class="small text-black-50">Team Leader – Guides the team and ensures deadlines are met. Leads meetings and sets targets for the team. Gives tasks based on team member’s skillset.</div>
<div class="small text-white-50">.</div>
<div class="small text-black-50">Hardware Design Manager – Oversees the design as a whole, and ensures individual subsystems interact as required by the project aims and design specification.</div>
<hr class="my-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://www.twitter.com">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card py-4 h-100">
<div class="card-body text-center">
<img class="mx-auto rounded-circle" src="img/me.JPG" alt="Picture of Leo Pashov">
<div class="small text-white-50">.</div>
<h4 class="text-uppercase m-0">Leo Pashov</h4>
<hr class="my-4">
<div class="small text-black-50">Fourth year Mechanical Engineering student</div>
<div class="small text-white-50">.</div>
<div class="small text-black-50">Mechanical Design Manager – Focusses on the mechanical aspects of the design providing functionality.
</div>
<hr class="my-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://www.twitter.com">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.twitter.com">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com">
<i class="fab fa-linkedin-in"></i>
</a>
</li
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-100">
<div class="card py-4 h-100">
<div class="card-body text-center">
<img class="mx-auto rounded-circle" src="img/naim.jpg" alt="Picture of Naim Govani">
<div class="small text-white-50">.</div>
<h4 class="text-uppercase m-0">Naim Govani</h4>
<hr class="my-4">
<div class="small text-black-50">Fourth year Electronic and Information Engineering student</div>
<div class="small text-white-50">.</div>
<div class="small text-black-50">Electronic Design Manager – Will primarily be focused on the electronic capabilities of the device. This may include control system design, microcontroller programming and communication with the device.
</div>
<hr class="my-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://www.twitter.com">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com">
<i class="fab fa-linkedin-in"></i>
</a>
</li
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-100">
<div class="card py-4 h-100">
<div class="card-body text-center">
<img class="mx-auto rounded-circle" src="img/imraj.jpg" alt="Picture of Imraj Singh">
<div class="small text-white-50">.</div>
<h4 class="text-uppercase m-0">Imraj Singh</h4>
<hr class="my-4">
<div class="small text-black-50">Fourth year Aeronautical Engineering student</div>
<div class="small text-white-50">.</div>
<div class="small text-black-50">Testing Manager – organises tests of prototypes and feeds back areas required for improvement of the product to the other managers</div>
<hr class="my-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://www.twitter.com">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://linkedin.com">
<i class="fab fa-linkedin-in"></i>
</a>
</li
</div>
</div>
</div>
</div>
</div>
</div>
<div class="social d-flex justify-content-center">
<a href="https://www.twitter.com" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.github.com" class="mx-2">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</section>
<!-- Additional information -->
<section id="info" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Additional information</h2>
</section>
<!-- Projects Section -->
<section id="projects" class="projects-section bg-light">
<div class="container">
<!-- Project One Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
<img class="img-fluid" src="img/atomcapture1.JPG" alt="screenshot of atom code">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Website development tools</h4>
<p class="mb-0 text-white-50">Atom was used as the main text editor. Atom benefits from being a free, open source development tool. It also allows cross platform editing. Atom's main advantage is it's ability to produce results without the need to get 'under the hood' with config files, for example. </p>
<p class="mb-0 text-white-50">Github was used as a repository hosting service, to allow for easy version control and backing up of files.</p>
<p class="mb-0 text-white-50">Bootstrap was used as a webpage template source, which allowed for the advanced layout. Bootstrap code was the basis of the webpage which was then modified and added to. Bootstrap benefits from allowing particularly high development speeds through ready-made code, as well as a fluid grid system that is great for creating mobile-friendly webpages.</p>
<hr class="d-none d-lg-block mb-0 ml-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project Two Row -->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="img/domain1.png" alt="domain image">
</div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">Registering a domain name</h4>
<p class="mb-0 text-white-50">A domain name must be registered through a domain name registrar. The registrar searches wether the requested domain already exists, and if it does not, they can place the domain name at a website created for the individual. This saves the domain name until the next steps can be taken.</p>
<hr class="d-none d-lg-block mb-0 mr-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project 4 Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
<img class="img-fluid" src="img/website.JPG" alt="Once the domain name is saved, a server is needed to allow the website to go live. This can be provided by a web hosting service, or an individual can set up their own server.
The server then allows internet traffic to access the information available on the chosen domain.">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Or using Github</h4>
<p class="mb-0 text-white-50">Github pages can be used to create a website. First, a repository is created. From here, the repository is cloned onto an individual computer. The website can then be created and edited through an index file, which can be commited and published. The webpage will be stored at https://username.github.io. </p>
<hr class="d-none d-lg-block mb-0 ml-0">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Additional information -->
<section id="web" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Websites</h2>
</section>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
What makes a good website?
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">What makes a good website?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Good websites must be attractive. This can be achieved by using consistent themes and colour schemes, as well as vivid, well placed imagery. Effects such as word overlays can also add to this.
<p class="mb-0 text-white-50">.</p>
Good websites, especially those showing products, must have powerful phrasing while not overwhelming the visitor with large amounts of text. Where a lot of information is required, it should be split up.
<p class="mb-0 text-white-50">.</p>
Ease of navigation is vital in website development. Clear buttons which remain on the screen add to this, and provide the visitor with a reference as to where they are on the page.
<p class="mb-0 text-white-50">.</p>
As mobile devices grow in popularity scalability in webpages is increasingly important, giving all users the same experience.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#accessibility">
Accessibility
</button>
<!-- Modal -->
<div class="modal fade" id="accessibility" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Accessibility</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Web accessibility mainly allows people with disabilities to use the internet. It can also be beneficial for people without disabilities, but who are accessing the internet through different methods.
Accessibility therefore also helps people using mobile devices, for example.
This website has been created using a fluid grid system, ensuring it fits neatly in any size screen.
Audio descriptions have also been added to each picture, helping those with visual impairments get a full webpage browsing experience.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#gdpr">
GDPR
</button>
<!-- Modal -->
<div class="modal fade" id="gdpr" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">GDPR</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
General Data Protection Regulation (GDPR) is an initiative brought in by the European Union to better protect people who's data is held by companies.
One requirement is to record what personal data is held, it's origin and what it is used for. Special measures must also be put in place for handling data of under 18s, however on this webpage there are no forms to take data from users, thus this does not need to be considered.
GDPR also covers 'opt in' features for sending marketing information, for example emails. As this product does not have any marketing communications yet, this has not had to be considered at this stage.
It is now also a requirement to inform visitors when using cookies. This website does not use cookies, thus this is not considered.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#marketing">
Marketing
</button>
<!-- Modal -->
<div class="modal fade" id="marketing" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Marketing</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Advertising would be the first method by which to attract more visitors to the website. This could include paying a company such as google to promote your website to google users.
Promoting through social media would be the next option, using existing social links and connections on platfroms such as facebook and twitter to spread the website's hyperlink.
Including popular keywords within the webpage would also be crucial, ensuring the page appears in a greater number of searches on websites such as google.
Looking at analytic data, for example through Google analytics, would allow for the comparison of changes to the website and how they affect traffic. This could help develop a more appealing webpage.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#futuresteps">
Future Steps
</button>
<!-- Modal -->
<div class="modal fade" id="futuresteps" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Future Steps</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
If given more time, the website could be made more interactive, with more pop up boxes and overlays. Cookies and other features that could help marketing and advertising could be included. An online shop could be included to make it easier for the customer to buy the product, boosting sales. Finally, a support section could be added to help existing customers get the most from their device.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Projects Section -->
<section id="projects" class="projects-section bg-light">
<div class="container">
</div>
</section>
<!-- Footer -->
<footer class="bg-black small text-center text-white-50">
<div class="container">
Copyright © Motion Lapse 2020
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</body>
</html>