-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
498 lines (471 loc) · 24.3 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
<!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">
<title>Syamkarni's Portfolio</title>
<link rel="icon" href="favcon.png">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/fontawesome.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- ////////////////////////////////////////////////////////////////////////////////////////
START SECTION 1 - THE NAVBAR SECTION
/////////////////////////////////////////////////////////////////////////////////////////////-->
<nav class="navbar navbar-expand-lg navbar-dark menu shadow fixed-top">
<div class="container">
<a class="navbar-brand" href="">
<h2>Syamkarni</h2>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Journey</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">About</a></li>
<li class="nav-item"><a class="nav-link" href="#faq">Education</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">portfolio</a></li>
</li>
</ul>
<a href="tel:+917331110012"><button href="tel:+917331110012" type="button" class="rounded-pill btn-rounded">
+91 7331110012
<span>
<i class="fas fa-phone-alt"></i>
</span>
</button></a>
</div>
</div>
</nav>
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////
START SECTION 2 - THE INTRO SECTION
/////////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="home" class="intro-section">
<div class="container">
<div class="row align-items-center text-white">
<!-- START THE CONTENT FOR THE INTRO -->
<div class="col-md-6 intros text-start">
<h1 class="display-2">
<span class="display-2--intro">Hey!, I'm Datta.</span>
<span class="display-2--description lh-base">
Sophomore
</span>
</h1>
</div>
<!-- START THE CONTENT FOR THE VIDEO -->
<div class="col-md-6 intros text-end">
<div class="video-box">
<img src="images/arts/intro-section-illustration.png" alt="video illutration" class="img-fluid">
<a href="#" class="glightbox position-absolute top-50 start-50 translate-middle">
</a>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,160L48,176C96,192,192,224,288,208C384,192,480,128,576,133.3C672,139,768,213,864,202.7C960,192,1056,96,1152,74.7C1248,53,1344,107,1392,133.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</section>
<!-- //////////////////////////////////////////////////////////////////////////////////////////////
START SECTION 3 - THE CAMPANIES SECTION
////////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="campanies" class="campanies">
<div class="container">
<div class="row text-center">
<h4 class="fw-bold lead mb-3">Languages Acquired</h4>
<div class="heading-line mb-5"></div>
</div>
</div>
<!-- START THE CAMPANIES CONTENT -->
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-2">
<div class="campanies__logo-box shadow-sm">
<img src="images/Skills/company-1.png" alt="Campany 1 logo" title="Campany 1 Logo" class="img-fluid">
</div>
</div>
<div class="col-md-4 col-lg-2">
<div class="campanies__logo-box shadow-sm">
<img src="images/Skills/company-2.png" alt="Campany 2 logo" title="Campany 2 Logo" class="img-fluid">
</div>
</div>
<div class="col-md-4 col-lg-2">
<div class="campanies__logo-box shadow-sm">
<img src="images/Skills/company-3.png" alt="Campany 3 logo" title="Campany 3 Logo" class="img-fluid">
</div>
</div>
<div class="col-md-4 col-lg-2">
<div class="campanies__logo-box shadow-sm">
<img src="images/Skills/company-4.png" alt="Campany 4 logo" title="Campany 4 Logo" class="img-fluid">
</div>
</div>
<div class="col-md-4 col-lg-2">
<div class="campanies__logo-box shadow-sm">
<img src="images/Skills/company-5.png" alt="Campany 5 logo" title="Campany 5 Logo" class="img-fluid">
</div>
</div>
<div class="col-md-4 col-lg-2">
<div class="campanies__logo-box shadow-sm">
<img src="images/Skills/company-6.png" alt="Campany 6 logo" title="Campany 6 Logo" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
<!-- //////////////////////////////////////////////////////////////////////////////////////////////
START SECTION 4 - THE SERVICES
///////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="services" class="services">
<div class="container">
<div class="row text-center">
<h1 class="display-3 fw-bold">My Journey</h1>
<div class="heading-line mb-1"></div>
</div>
<!-- START THE DESCRIPTION CONTENT -->
<div class="row pt-2 pb-2 mt-0 mb-3">
<div class="col-md-6 border-right">
<div class="bg-white p-3">
<h2 class="fw-bold text-capitalize text-center">
In my journey of life, I have been learning and learning and learning.....
</h2>
</div>
</div>
<div class="col-md-6">
<div class="bg-white p-4 text-start">
<p class="fw-light">
<br>Here are few interests that I have developed throughout my journey.
</p>
</div>
</div>
</div>
</div>
<!-- START THE CONTENT FOR THE SERVICES -->
<div class="container">
<!-- START THE MARKETING CONTENT -->
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 services mt-4">
<div class="services__content">
<div class="icon d-block fas fa-paper-plane"></div>
<h3 class="display-3--title mt-1">Technology and Mathematics</h3>
<p class="lh-lg">
Since my childhood, I have loved using Technology and gadgets. And from then on I didn’t lose interest. That’s the reason why I am here at SRM pursuing CSE. Coming to my studies, I have been a fan of mathematics. I barely remember of me studying any subject other than maths. I have made a deep connection with this subject and couldn’t separate it from my life. And that really inspired me to study Statistics.
<br>Nevertheless, both have played a vital role in my life.
</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 services mt-4 text-end">
<div class="services__pic">
<img src="images/services/service-1.png" alt="marketing illustration" class="img-fluid">
</div>
</div>
</div>
<!-- START THE WEB DEVELOPMENT CONTENT -->
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 services mt-4 text-start">
<div class="services__pic">
<img src="images/services/service-2.png" alt="web development illustration" class="img-fluid">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 services mt-4">
<div class="services__content">
<div class="icon d-block fas fa-code"></div>
<h3 class="display-3--title mt-1">web development and coding</h3>
<p class="lh-lg">
I started to code when I was 14 years old. I was taught HTML as my first markup laguage. From there I haven't stopped my journey of web development after 1 complete year of mastering HTML, I have started to explore other coding languages of Web Develeopmen and kept on expanding my knowledge in Web Development. Then I started to learn programming languages at the age of 18 kickstarting with Python.
I really hope that I never leave coding in my journey.
</p>
</div>
</div>
</div>
<!-- START THE CLOUD HOSTING CONTENT -->
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 services mt-4">
<div class="services__content">
<div class="icon d-block fas fa-cloud-upload-alt"></div>
<h3 class="display-3--title mt-1">Database and SQL</h3>
<p class="lh-lg">
On my journey of learning, I recently come across an interesting topic Databases. This topic aspires to me. Almost every technological service is somehow connected to it. This motivated me to dig more into the databases. Now I am into it and have started learning SQL. I hope to complete it by the end of the year. Databases also help me to make structured storage secure, efficient, and fast.
Database software makes data management simpler by enabling users to store data in a structured form and then access it. It typically has a graphical interface to help create and manage the data and, in some cases, users can construct their own databases by using database software.
</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 services mt-4 text-end">
<div class="services__pic">
<img src="images/services/service-3.png" alt="cloud hosting illustration" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
<!-- ////////////////////////////////////////////////////////////////////////////////////////////////
START SECTION 5 - THE TESTIMONIALS
/////////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="testimonials" class="testimonials">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#fff" fill-opacity="1" d="M0,96L48,128C96,160,192,224,288,213.3C384,203,480,117,576,117.3C672,117,768,203,864,202.7C960,203,1056,117,1152,117.3C1248,117,1344,203,1392,245.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
<div class="container">
<div class="row text-center text-white">
<h1 class="display-3 fw-bold">More about ME</h1>
<hr style="width: 100px; height: 3px; " class="mx-auto">
<p class="lead pt-1">Still confused about me?</p>
</div>
<!-- START THE CAROUSEL CONTENT -->
<div class="row align-items-center">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- CAROUSEL ITEM 1 -->
<div class="carousel-item active">
<!-- testimonials card -->
<div class="testimonials__card">
<p class="lh-lg">
<!--i class="fas fa-quote-left"></i-->
Hello, I am Syamkarni, people know me better as Datta. I am currently persuing B.Tech. in CSE S/W Cyber Security at SRMIST. Apart from that I learn statistics part-time.<br> I strive to learn something new everyday. I believe in the power of working together to create a whole that is greater than the sum of its parts. Committed to utilize my skills to build career. Personally I am a keyboard enthusiast and a big fan of Dwight Kurt Schrute.
<!--i class="fas fa-quote-right"></i-->
</p>
</div>
<!-- client picture -->
<div class="testimonials__picture">
<img src="images/testimonials/client-1.jpg" alt="client-1 picture" class="rounded-circle img-fluid">
</div>
<!-- client name & role -->
<div class="testimonials__name">
<h3>Syamkarni Datta Uppalapati</h3>
<p class="fw-light">Student</p>
</div>
</div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#fff" fill-opacity="1" d="M0,96L48,128C96,160,192,224,288,213.3C384,203,480,117,576,117.3C672,117,768,203,864,202.7C960,203,1056,117,1152,117.3C1248,117,1344,203,1392,245.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</section>
<!-- /////////////////////////////////////////////////////////////////////////////////////////////////
START SECTION 6 - THE FAQ
//////////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="faq" class="faq">
<div class="container">
<div class="row text-center">
<h1 class="display-3 fw-bold text-uppercase">Education</h1>
<div class="heading-line"></div>
<p class="lead">This is a glipse of my educational background</p>
</div>
<!-- ACCORDION CONTENT -->
<div class="row mt-5">
<div class="col-md-12">
<div class="accordion" id="accordionExample">
<!-- ACCORDION ITEM 1 -->
<div class="accordion-item shadow mb-3">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<strong>Primary School</strong>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
I have completed my Primary Schooling at DAV Public School, Visakhapatnam.<br><br>
(2007-2012)
</div>
</div>
</div>
<!-- ACCORDION ITEM 2 -->
<div class="accordion-item shadow mb-3">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<strong>High School</strong>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
I have changed my schools for all next three consecutive 3 years. Then I have joined Delhi Public School, vizag steel plant to complete my 9th and 10th grade.<br><br>
(2012-2019)
</div>
</div>
</div>
<!-- ACCORDION ITEM 3 -->
<div class="accordion-item shadow mb-3">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<strong>Intermediate</strong>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
I have completed my Intermediate in Sri Venkateswara College, Vizag.<br><br>
(2019-2021)
</div>
</div>
</div>
<!-- ACCORDION ITEM 4 -->
<div class="accordion-item shadow mb-3">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<strong>What am I doing now</strong>
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
I am currently persuing my B.Tech. in CSE s/w Cyber Security at SRM Univerysity, Kattankulathur.<br><br>
(2021-2025)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////
START SECTION 7 - THE PORTFOLIO
//////////////////////////////////////////////////////////////////////////////////////////////////////-->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row text-center mt-5">
<h1 class="display-3 fw-bold text-capitalize">Latest work</h1>
<div class="heading-line"></div>
<p class="lead">
Overview of some of my Notable Certificates
</p>
</div>
<!-- START THE PORTFOLIO ITEMS -->
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="portfolio-box shadow">
<img src="images/portfolio/1.png" alt="portfolio 1 image" title="portfolio 1 picture" class="img-fluid">
<div class="portfolio-info">
<div class="caption">
<h4>OOPs Concept in C++</h4>
<p>I have achieved this certificate by completing an online course in OOPs concept in C++</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="portfolio-box shadow">
<img src="images/portfolio/2.png" alt="portfolio 2 image" title="portfolio 2 picture" class="img-fluid">
<div class="portfolio-info">
<div class="caption">
<h4>Programming and <br>Data Science</h4>
<p>I earned this certificate after listening to hours of lectures and giving numerous offline tests.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="portfolio-box shadow">
<img src="images/portfolio/3.png" alt="portfolio 3 image" title="portfolio 3 picture" class="img-fluid">
<div class="portfolio-info">
<div class="caption">
<h4>Kickstart 2022</h4>
<p>Personally, this is a special certificate for me. I was placed 7672nd worldwide in the contest Kickstart 2022(code contest by Google). Surprisingly this was my first coding contest.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="row">
<!-- CONTENT FOR THE MOBILE NUMBER -->
<div class="col-md-4 col-lg-4 contact-box pt-1 d-md-block d-lg-flex d-flex">
<div class="contact-box__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-phone-call" viewBox="0 0 24 24" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
<path d="M15 7a2 2 0 0 1 2 2" />
<path d="M15 3a6 6 0 0 1 6 6" />
</svg>
</div>
<div class="contact-box__info">
<a href="https://api.whatsapp.com/send?phone=+917331110012" class="contact-box__info--title">+91 731110012</a>
<p class="contact-box__info--subtitle"> Anytime</p>
</div>
</div>
<!-- CONTENT FOR EMAIL -->
<div class="col-md-4 col-lg-4 contact-box pt-1 d-md-block d-lg-flex d-flex">
<div class="contact-box__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-opened" viewBox="0 0 24 24" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<polyline points="3 9 12 15 21 9 12 3 3 9" />
<path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" />
<line x1="3" y1="19" x2="9" y2="13" />
<line x1="15" y1="13" x2="21" y2="19" />
</svg>
</div>
<div class="contact-box__info">
<a href="mailto:[email protected]" class="contact-box__info--title">[email protected]</a>
<p class="contact-box__info--subtitle">For all your queries</p>
</div>
</div>
<!-- CONTENT FOR LOCATION -->
<div class="col-md-4 col-lg-4 contact-box pt-1 d-md-block d-lg-flex d-flex">
<div class="contact-box__icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-2" viewBox="0 0 24 24" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="18" y1="6" x2="18" y2="6.01" />
<path d="M18 13l-3.5 -5a4 4 0 1 1 7 0l-3.5 5" />
<polyline points="10.5 4.75 9 4 3 7 3 20 9 17 15 20 21 17 21 15" />
<line x1="9" y1="4" x2="9" y2="17" />
<line x1="15" y1="15" x2="15" y2="20" />
</svg>
</div>
<div class="contact-box__info">
<a href="https://www.google.com/maps/place/Visakhapatnam,+Andhra+Pradesh/@17.7386225,83.1225038,11z/data=!3m1!4b1!4m6!3m5!1s0x3a39431389e6973f:0x92d9c20395498468!8m2!3d17.6868159!4d83.2184815!16zL20vMDFqbXBm!5m1!1e2" class="contact-box__info--title">Vizag, AndhraPradesh</a>
<p class="contact-box__info--subtitle">AP 530013, India</p>
</div>
</div>
</div>
</div>
<!-- START THE SOCIAL MEDIA CONTENT -->
<div class="footer-sm" style="background-color: #212121;">
<div class="container">
<div class="row py-4 text-center text-white">
<div class="col-lg-5 col-md-6 mb-4 mb-md-0">
<strong>Are we socializing yet?</strong>
</div>
<div class="col-lg-7 col-md-6">
<a href="https://www.facebook.com/syamkarni.uppalapati/"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/syamkarni"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/ud9211"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/uppalapati-datta-18200a222/"><i class="fab fa-linkedin"></i></a>
<a href="https://www.instagram.com/syamkarni/"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<!-- START THE CONTENT FOR THE CAMPANY INFO -->
<!-- START THE COPYRIGHT INFO -->
<div class="footer-bottom pt-5 pb-5">
<div class="container">
<div class="row text-center text-white">
<div class="col-12">
<div class="footer-bottom__copyright">
Click for a <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Surprise</a> | Sincere Thanks <a href="http://codewithpatrick.com" target="_blank">Muriungi</a><br>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- BACK TO TOP BUTTON -->
<a href="#" class="shadow btn-primary rounded-circle back-to-top">
<i class="fas fa-chevron-up"></i>
</a>
<script src="assets/vendors/js/glightbox.min.js"></script>
<script type="text/javascript">
const lightbox = GLightbox({
'touchNavigation': true,
'href': 'https://www.youtube.com/watch?v=J9lS14nM1xg',
'type': 'video',
'source': 'youtube', //vimeo, youtube or local
'width': 900,
'autoPlayVideos': 'true',
});
</script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>