-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
417 lines (412 loc) · 30.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
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
<!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" />
<meta property="og:title" content="Kartik Verma`s Portfolio - Know more about me." />
<meta property="og:description"
content="I am Kartik Verma currently studying CSE in Chitkara University and an NCC Cadet. I have knowledge about : HTML, CSS, JS, Bootstrap, Bulma CSS Framework, GSAP" />
<meta name="description"
content="I am Kartik Verma currently studying CSE in Chitkara University and an NCC Cadet. I have knowledge about : HTML, CSS, JS, Bootstrap, Bulma CSS Framework, GSAP" />
<meta property="og:image" content="https://kartikverma0.github.io/portfolio/images/kartik.png" />
<meta property="og:image:alt" content="Kartik Verma`s Photo" />
<meta property="og:locale" content="en_GB" />
<meta name="theme-color" content="#ba229c" />
<title>Kartik Verma`s Portfolio</title>
<link rel="canonical" href="https://kartikverma0.github.io/portfolio/" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Rozha+One&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="css/indexStyle.css" />
<link rel="shortcut icon" href="images/kartik.png" type="image/png" />
</head>
<body>
<header class="hero" id="hero">
<div class="w-100 h-100 u-blurredbg d-flex align-items-center u-position-relative">
<h1 class="hero__heading text-center" id="hero__heading">
Welcome
</h1>
</div>
</header>
<nav class="navigation-bar">
<ul class="navigation-bar__list">
<li>
<a href="#hero" class="navigation-bar__list__link">HOME</a>
</li>
<li>
<a href="#my-description" class="navigation-bar__list__link">ABOUT</a>
</li>
<li>
<a href="#projects" class="navigation-bar__list__link">PROJECTS</a>
</li>
<li>
<a href="#skills" class="navigation-bar__list__link">SKILLS</a>
</li>
<li>
<a href="#contact" class="navigation-bar__list__link">CONTACT</a>
</li>
</ul>
</nav>
<nav class="navigation-bar-mobile">
<div class="navigation-bar-mobile__toggle-btn">
<svg width="36" height="25" viewBox="0 0 36 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="5" fill="white" />
<rect y="10" width="36" height="5" fill="white" />
<rect y="20" width="36" height="5" fill="white" />
</svg>
<svg class="hidden" width="29" height="28" viewBox="0 0 29 28" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="0.923035" y="24.627" width="34.7541" height="4.77018" transform="rotate(-45 0.923035 24.627)"
fill="white" />
<rect x="4.34845" width="34.7541" height="4.77018" transform="rotate(45 4.34845 0)" fill="white" />
</svg>
</div>
<div class="navigation-bar-mobile__links active">
<ul>
<li><a href="#hero">HOME</a></li>
<li><a href="#my-description">ABOUT</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#skills">SKILLS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</nav>
<main>
<section class="description-section">
<section class="my-description container" id="my-description">
<div class="row">
<section class="col-md-6 u-center-on-small-screen">
<h2 class="introHeading secondary-heading">
Hi, I am Kartik,
</h2>
<div class="col-md-9 u-mr-auto">
<p>
a driven third-year Computer Science and Engineering student at Chitkara University,
thrives on the
challenge of bringing web ideas to life. Fueled by a passion for web development, I have
diligently honed my skills
through online courses and personal projects, mastering diverse technologies like HTML,
CSS, JavaScript, Node.js,
Express, and MongoDB. Beyond technical prowess, I boast strong communication and
collaboration skills, seamlessly integrating into any team environment.
</p>
</div>
<a href="mailto:[email protected]" class="button-primary" id="getInTouch">
Get in Touch
</a>
</section>
<div class="image-container col-md-6 pt-5">
<img src="images/kartik.png" alt="Kartik" class="kartik-image" />
</div>
</div>
</section>
<div class="waves-divider">
<svg id="visual" viewBox="0 0 1920 1080">
<path
d="M0 810L32 812C64 814 128 818 192 822.7C256 827.3 320 832.7 384 827C448 821.3 512 804.7 576 802.3C640 800 704 812 768 813.8C832 815.7 896 807.3 960 803.5C1024 799.7 1088 800.3 1152 799.8C1216 799.3 1280 797.7 1344 801.2C1408 804.7 1472 813.3 1536 820.8C1600 828.3 1664 834.7 1728 838.3C1792 842 1856 843 1888 843.5L1920 844L1920 1081L1888 1081C1856 1081 1792 1081 1728 1081C1664 1081 1600 1081 1536 1081C1472 1081 1408 1081 1344 1081C1280 1081 1216 1081 1152 1081C1088 1081 1024 1081 960 1081C896 1081 832 1081 768 1081C704 1081 640 1081 576 1081C512 1081 448 1081 384 1081C320 1081 256 1081 192 1081C128 1081 64 1081 32 1081L0 1081Z"
fill="#360c2d" id="wave1"></path>
<path
d="M0 896L32 891C64 886 128 876 192 873.3C256 870.7 320 875.3 384 874C448 872.7 512 865.3 576 859.7C640 854 704 850 768 856.8C832 863.7 896 881.3 960 887.5C1024 893.7 1088 888.3 1152 886.3C1216 884.3 1280 885.7 1344 883.8C1408 882 1472 877 1536 874C1600 871 1664 870 1728 871C1792 872 1856 875 1888 876.5L1920 878L1920 1081L1888 1081C1856 1081 1792 1081 1728 1081C1664 1081 1600 1081 1536 1081C1472 1081 1408 1081 1344 1081C1280 1081 1216 1081 1152 1081C1088 1081 1024 1081 960 1081C896 1081 832 1081 768 1081C704 1081 640 1081 576 1081C512 1081 448 1081 384 1081C320 1081 256 1081 192 1081C128 1081 64 1081 32 1081L0 1081Z"
fill="#5f2b52" id="wave2"></path>
<path
d="M0 938L32 936.8C64 935.7 128 933.3 192 934.8C256 936.3 320 941.7 384 939.3C448 937 512 927 576 922.8C640 918.7 704 920.3 768 923.2C832 926 896 930 960 929.7C1024 929.3 1088 924.7 1152 921.7C1216 918.7 1280 917.3 1344 918.2C1408 919 1472 922 1536 926.7C1600 931.3 1664 937.7 1728 935.8C1792 934 1856 924 1888 919L1920 914L1920 1081L1888 1081C1856 1081 1792 1081 1728 1081C1664 1081 1600 1081 1536 1081C1472 1081 1408 1081 1344 1081C1280 1081 1216 1081 1152 1081C1088 1081 1024 1081 960 1081C896 1081 832 1081 768 1081C704 1081 640 1081 576 1081C512 1081 448 1081 384 1081C320 1081 256 1081 192 1081C128 1081 64 1081 32 1081L0 1081Z"
fill="#8a4c7b" id="wave3"></path>
<path
d="M0 986L32 984.7C64 983.3 128 980.7 192 981C256 981.3 320 984.7 384 982.3C448 980 512 972 576 966.3C640 960.7 704 957.3 768 961.7C832 966 896 978 960 978.8C1024 979.7 1088 969.3 1152 963.3C1216 957.3 1280 955.7 1344 960.7C1408 965.7 1472 977.3 1536 982.2C1600 987 1664 985 1728 986.7C1792 988.3 1856 993.7 1888 996.3L1920 999L1920 1081L1888 1081C1856 1081 1792 1081 1728 1081C1664 1081 1600 1081 1536 1081C1472 1081 1408 1081 1344 1081C1280 1081 1216 1081 1152 1081C1088 1081 1024 1081 960 1081C896 1081 832 1081 768 1081C704 1081 640 1081 576 1081C512 1081 448 1081 384 1081C320 1081 256 1081 192 1081C128 1081 64 1081 32 1081L0 1081Z"
fill="#b86fa7" id="wave4"></path>
<path
d="M0 1004L32 1007.8C64 1011.7 128 1019.3 192 1022C256 1024.7 320 1022.3 384 1019.7C448 1017 512 1014 576 1015.5C640 1017 704 1023 768 1024.7C832 1026.3 896 1023.7 960 1027.3C1024 1031 1088 1041 1152 1044.3C1216 1047.7 1280 1044.3 1344 1043.5C1408 1042.7 1472 1044.3 1536 1041C1600 1037.7 1664 1029.3 1728 1025.3C1792 1021.3 1856 1021.7 1888 1021.8L1920 1022L1920 1081L1888 1081C1856 1081 1792 1081 1728 1081C1664 1081 1600 1081 1536 1081C1472 1081 1408 1081 1344 1081C1280 1081 1216 1081 1152 1081C1088 1081 1024 1081 960 1081C896 1081 832 1081 768 1081C704 1081 640 1081 576 1081C512 1081 448 1081 384 1081C320 1081 256 1081 192 1081C128 1081 64 1081 32 1081L0 1081Z"
fill="#e794d5" id="wave5"></path>
</svg>
</div>
</section>
<section class="portfolio-section u-center-on-small-screen" id="projects">
<div class="container u-center-on-small-screen pt-3">
<h2 class="secondary-heading secondary-heading--portfolio" id="portfolioHeading">
Projects
</h2>
</div>
<div class="container pb-5 u-center-on-small-screen portfolioItems">
<h3 class="portfolioItems__SubHeading my-3">
<a class="portfolioItems__SubHeading--color portfolioItems__SubHeading--text-decoration-none"
href="https://kartikverma0.github.io/operation-military-inventory/" target="_blank">Operation
Military
Inventory</a>
<p class="portfolioItems__SubHeading__github"><a
href="https://github.com/KartikVerma0/operation-military-inventory" target="_blank">Github
Repository</a>
</p>
</h3>
<div class="portfolioItems__grid mb-5">
<img src="images/grid-p1.jpg" alt="operation military inventory home page mobile" /><img
src="images/grid-p2.jpg" alt="operation military inventory services equipment navigation" /><img
src="images/grid-p3.jpg" alt="operation military inventory equipment detail card" /><img
src="images/grid-p4.jpg"
alt="operation military inventory services equipment navigation card" /><img
src="images/grid-p5.jpg" alt="operation military inventory equipment grid" />
</div>
<h3 class="portfolioItems__SubHeading my-3">
<a class="portfolioItems__SubHeading--color portfolioItems__SubHeading--text-decoration-none"
href="https://task-management-app-kartikverma0s-projects.vercel.app/" target="_blank">Task
Management
Application</a>
<p class="portfolioItems__SubHeading__github"><a
href="https://github.com/KartikVerma0/Task-Management-app" target="_blank">Github
Repository</a></p>
</h3>
<div class="portfolioItems__grid mb-5">
<img src="images/image2.PNG" alt="Task
Management
Application signin page mobile" /><img src="images/image.PNG" alt="Task
Management
Application services Home Page" /><img src="images/image4.PNG" alt="Task
Management
Application Task detail card" /><img src="images/image5.PNG" alt="Task
Management
Application Task edit Modal" /><img src="images/image3.PNG" alt="Task
Management
Application Task list page" />
</div>
</div>
<div class="peak-divider">
<svg id="visual" viewBox="0 0 1920 1080">
<path
d="M0 752L83 769L167 783L250 764L334 738L417 779L501 781L584 758L668 766L751 752L835 779L918 773L1002 772L1085 743L1169 764L1252 760L1336 785L1419 737L1503 760L1586 744L1670 755L1753 748L1837 776L1920 759L1920 1081L1837 1081L1753 1081L1670 1081L1586 1081L1503 1081L1419 1081L1336 1081L1252 1081L1169 1081L1085 1081L1002 1081L918 1081L835 1081L751 1081L668 1081L584 1081L501 1081L417 1081L334 1081L250 1081L167 1081L83 1081L0 1081Z"
fill="#f97bde" id="peak1"></path>
<path
d="M0 815L83 805L167 800L250 802L334 808L417 818L501 854L584 834L668 847L751 803L835 796L918 804L1002 793L1085 819L1169 811L1252 807L1336 827L1419 829L1503 815L1586 834L1670 823L1753 842L1837 816L1920 798L1920 1081L1837 1081L1753 1081L1670 1081L1586 1081L1503 1081L1419 1081L1336 1081L1252 1081L1169 1081L1085 1081L1002 1081L918 1081L835 1081L751 1081L668 1081L584 1081L501 1081L417 1081L334 1081L250 1081L167 1081L83 1081L0 1081Z"
fill="#fd9fe7" id="peak2"></path>
<path
d="M0 859L83 867L167 881L250 896L334 910L417 875L501 861L584 874L668 892L751 874L835 904L918 871L1002 883L1085 862L1169 874L1252 862L1336 879L1419 857L1503 906L1586 904L1670 912L1753 879L1837 876L1920 902L1920 1081L1837 1081L1753 1081L1670 1081L1586 1081L1503 1081L1419 1081L1336 1081L1252 1081L1169 1081L1085 1081L1002 1081L918 1081L835 1081L751 1081L668 1081L584 1081L501 1081L417 1081L334 1081L250 1081L167 1081L83 1081L0 1081Z"
fill="#ffc0ef" id="peak3"></path>
<path
d="M0 923L83 964L167 943L250 959L334 952L417 936L501 970L584 937L668 930L751 945L835 925L918 965L1002 933L1085 929L1169 962L1252 963L1336 963L1419 934L1503 952L1586 931L1670 940L1753 961L1837 940L1920 940L1920 1081L1837 1081L1753 1081L1670 1081L1586 1081L1503 1081L1419 1081L1336 1081L1252 1081L1169 1081L1085 1081L1002 1081L918 1081L835 1081L751 1081L668 1081L584 1081L501 1081L417 1081L334 1081L250 1081L167 1081L83 1081L0 1081Z"
fill="#ffe0f7" id="peak4"></path>
<path
d="M0 985L83 987L167 1009L250 988L334 1003L417 1017L501 987L584 1008L668 1003L751 1029L835 1011L918 1026L1002 1000L1085 997L1169 1011L1252 1008L1336 988L1419 1002L1503 1020L1586 1014L1670 1011L1753 1017L1837 986L1920 993L1920 1081L1837 1081L1753 1081L1670 1081L1586 1081L1503 1081L1419 1081L1336 1081L1252 1081L1169 1081L1085 1081L1002 1081L918 1081L835 1081L751 1081L668 1081L584 1081L501 1081L417 1081L334 1081L250 1081L167 1081L83 1081L0 1081Z"
fill="#ffffff" id="peak5"></path>
</svg>
</div>
</section>
<section class="skill-section u-center-on-small-screen" id="skills">
<div class="container u-center-on-small-screen pt-3">
<h2 class="secondary-heading secondary-heading--skill" id="skillHeading">
Skills
</h2>
</div>
<div class="skills-main container">
<div class="skill-badge-box">
<figure class="skill-figure">
<img src="images/vscode.svg" alt="vs code icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
VS Code
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/html5.svg" alt="html icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
HTML5
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/css3.svg" alt="css icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
CSS
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/javascript.svg" alt="javascript icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
JavaScript
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/bootstrap.svg" alt="bootstrap icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
BootStrap
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/bulma.svg" alt="bulma css icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
Bulma
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/git.svg" alt="git icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
Git
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/github.svg" alt="github icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
GitHub
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/sass.svg" alt="sass icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
SASS
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/gsap.png" alt="gsap icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
GSAP
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/express.svg" alt="express icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
Express
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/mongodb.png" alt="mongodb icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
MongoDB
</figcaption>
</figure>
<figure class="skill-figure">
<img src="images/mongoose.svg" alt="mongoose icon" class="skill-figure__image" />
<figcaption class="skill-figure__caption">
Mongoose
</figcaption>
</figure>
</div>
<div class="skill-lottie">
<lottie-player src="https://assets10.lottiefiles.com/packages/lf20_irbwsg1b.json"
background="transparent" speed="1" loop autoplay
class="skill-lottie__animation"></lottie-player>
</div>
</div>
<div class="curve-divider">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" class="shape-fill" fill="#E794D5" fill-opacity="1"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" class="shape-fill" fill="#E794D5" fill-opacity="1"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
class="shape-fill" fill="#E794D5" fill-opacity="1"></path>
</svg>
</div>
</section>
<section class="contact-section u-center-on-small-screen pt-5" id="contact">
<div class="container u-center-on-small-screen pt-3">
<h2 class="contact-section__primary-heading" id="contactHeading">
Contact
</h2>
</div>
<div class="container mt-5">
<div class="row u-pb-5rem u-gap-big-tab u-justify-content-center-tablet">
<div class="col-md-6 u-center-on-small-screen contact-section__text" id="contact-section__text">
<div>
<h3 class="contact-section__secondary-heading">
EMAIL:
</h3>
<p class="contact-section__paragraph">
<a href="mailto:[email protected]"
class="contact-section__link underline-on-hover">[email protected]</a>
</p>
</div>
<div class="social-media-section">
<h3 class="mt-5 mb-3 social-media-section__heading">
SOCIAL MEDIA:
</h3>
<div class="social-media-section__circle">
<a href="https://github.com/KartikVerma0"
class="social-media-section__circle__link"><img src="images/github_2048_black.png"
alt="github logo" class="social-media-section__circle__link__image" /></a>
<a href="https://www.linkedin.com/in/kartikvr/"
class="social-media-section__circle__link"><img
src="images/linkedin-icon-logo-png-transparent.png" alt="linkedin logo"
class="social-media-section__circle__link__image" /></a>
<a href="https://twitter.com/KartikVr_" class="social-media-section__circle__link"><img
src="images/cricle-twitter-emblem-png-clipart-8.png" alt="twitter logo"
class="social-media-section__circle__link__image" /></a>
<a href="https://www.kooapp.com/profile/kartikvr20"
class="social-media-section__circle__link"><img src="images/koo.png" alt="koo logo"
class="social-media-section__circle__link__image" /></a>
</div>
</div>
</div>
<div class="col-md-6 u-center-on-small-screen u-position-relative">
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_x9mnlnj6.json"
background="transparent" speed="1" loop autoplay
class="contactFormLottieAnimation"></lottie-player>
<form action="https://sheetdb.io/api/v1/zx5puiru425d1" class="contactForm" id="contactForm"
method="POST">
<div>
<label for="nameField" class="contactForm__label">NAME:</label>
<input class="contactForm__input contactForm__input--height-medium" type="text"
name="data[name]" id="nameField" required />
</div>
<div>
<label for="emailField" class="contactForm__label">EMAIL:</label>
<input class="contactForm__input contactForm__input--height-medium" type="email"
name="data[email]" id="emailField" required />
</div>
<div>
<label for="nameField" class="contactForm__label">MESSAGE:</label>
<textarea class="contactForm__input" type="text" name="data[message]" id="nameField"
required rows="5"></textarea>
</div>
<button class="mt-4 button-secondary" id="contactFormButton">
SUBMIT
<div class="spinner-border text-dark d-none" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="step-divider">
<svg id="visual" viewBox="0 540 1920 540">
<path
d="M0 735L137 735L137 702L274 702L274 727L411 727L411 709L549 709L549 723L686 723L686 709L823 709L823 712L960 712L960 729L1097 729L1097 710L1234 710L1234 709L1371 709L1371 699L1509 699L1509 705L1646 705L1646 723L1783 723L1783 726L1920 726L1920 725L1920 1081L1920 1081L1783 1081L1783 1081L1646 1081L1646 1081L1509 1081L1509 1081L1371 1081L1371 1081L1234 1081L1234 1081L1097 1081L1097 1081L960 1081L960 1081L823 1081L823 1081L686 1081L686 1081L549 1081L549 1081L411 1081L411 1081L274 1081L274 1081L137 1081L137 1081L0 1081Z"
fill="#e794e8" id="step1"></path>
<path
d="M0 805L137 805L137 801L274 801L274 789L411 789L411 799L549 799L549 794L686 794L686 807L823 807L823 808L960 808L960 805L1097 805L1097 807L1234 807L1234 769L1371 769L1371 801L1509 801L1509 805L1646 805L1646 770L1783 770L1783 804L1920 804L1920 786L1920 1081L1920 1081L1783 1081L1783 1081L1646 1081L1646 1081L1509 1081L1509 1081L1371 1081L1371 1081L1234 1081L1234 1081L1097 1081L1097 1081L960 1081L960 1081L823 1081L823 1081L686 1081L686 1081L549 1081L549 1081L411 1081L411 1081L274 1081L274 1081L137 1081L137 1081L0 1081Z"
fill="#b66ca6" id="step2"></path>
<path
d="M0 878L137 878L137 880L274 880L274 877L411 877L411 853L549 853L549 862L686 862L686 842L823 842L823 842L960 842L960 870L1097 870L1097 879L1234 879L1234 864L1371 864L1371 859L1509 859L1509 877L1646 877L1646 859L1783 859L1783 844L1920 844L1920 866L1920 1081L1920 1081L1783 1081L1783 1081L1646 1081L1646 1081L1509 1081L1509 1081L1371 1081L1371 1081L1234 1081L1234 1081L1097 1081L1097 1081L960 1081L960 1081L823 1081L823 1081L686 1081L686 1081L549 1081L549 1081L411 1081L411 1081L274 1081L274 1081L137 1081L137 1081L0 1081Z"
fill="#884679" id="step3"></path>
<path
d="M0 951L137 951L137 933L274 933L274 916L411 916L411 920L549 920L549 916L686 916L686 948L823 948L823 947L960 947L960 931L1097 931L1097 945L1234 945L1234 938L1371 938L1371 948L1509 948L1509 914L1646 914L1646 918L1783 918L1783 931L1920 931L1920 947L1920 1081L1920 1081L1783 1081L1783 1081L1646 1081L1646 1081L1509 1081L1509 1081L1371 1081L1371 1081L1234 1081L1234 1081L1097 1081L1097 1081L960 1081L960 1081L823 1081L823 1081L686 1081L686 1081L549 1081L549 1081L411 1081L411 1081L274 1081L274 1081L137 1081L137 1081L0 1081Z"
fill="#5c224f" id="step4"></path>
<path
d="M0 999L137 999L137 989L274 989L274 1003L411 1003L411 1006L549 1006L549 993L686 993L686 1028L823 1028L823 995L960 995L960 1023L1097 1023L1097 1008L1234 1008L1234 994L1371 994L1371 1023L1509 1023L1509 986L1646 986L1646 1019L1783 1019L1783 1016L1920 1016L1920 992L1920 1081L1920 1081L1783 1081L1783 1081L1646 1081L1646 1081L1509 1081L1509 1081L1371 1081L1371 1081L1234 1081L1234 1081L1097 1081L1097 1081L960 1081L960 1081L823 1081L823 1081L686 1081L686 1081L549 1081L549 1081L411 1081L411 1081L274 1081L274 1081L137 1081L137 1081L0 1081Z"
fill="#320028" id="step5"></path>
</svg>
</div>
<p>
Made with <img src="images/heart.png" alt="heart icon" /> in
Bharat
<img src="images/india.png" alt="bharat/india flag icon" /> by
Kartik.
</p>
</footer>
<!-- <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script> -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>