-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
321 lines (301 loc) · 22.1 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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GOPALAKRISHNAN</title>
<link rel="shortcut icon" href="./assets/img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="./assets/css/main.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js" > </script>
<script type="text/javascript">
(function() {
emailjs.init("Udd_CSymzEjnd-rOe");
})();
</script>
</head>
<body>
<!-- Nave Bar -->
<nav class="bg-[rgba(27,31,36,0.9)] flex justify-between items-center p-4 sm:p-8 w-full" id="nav">
<div>
<a href="#home"><img src="./assets/img/logo.png" alt="logo" class="imghover w-44 sm:w-60 "></a>
</div>
<!-- nav toggle-bar -->
<div class="relative sm:hidden ">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24 "
class="text-textcolor hover:cursor-pointer" id="mobileNavBtn">
<path fill="currentColor" d="M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z" />
</svg>
<ul
class="hidden absolute right-4 space-y-4 border-solid border-rose-600 border-2 rounded-lg p-4 text-white font-bold"
id="mobileNav">
<li class="hover:text-sky-500"><a href="#home">HOME</a></li>
<li class="hover:text-sky-500"><a href="#about">ABOUT</a></li>
<li class="hover:text-sky-500"><a href="#skills">SKILLS</a></li>
<li class="hover:text-sky-500"><a href="#projects">PROJECT</a></li>
<li class="hover:text-sky-500"><a href="#contactus">CONTACT</a></li>
</ul>
</div>
<!-- navbar for laptop -->
<div class="hidden sm:block ">
<ul class="flex text-textcolor font-bold hover: space-x-12 pl-8">
<li>
<a href="#home" class="hover:text-sky-600 text-sm hover:border-yellow-500 hover:border-b-2">Home</a>
</li>
<li>
<a href="#about" class="hover:text-sky-600 text-sm hover:border-yellow-500 hover:border-b-2">About</a>
</li>
<li>
<a href="#skills" class="hover:text-sky-600 text-sm hover:border-yellow-500 hover:border-b-2">Skills</a>
</li>
<li>
<a href="#projects" class="hover:text-sky-600 text-sm hover:border-yellow-500 hover:border-b-2">Projects</a>
</li>
<li>
<a href="#contactus" class="hover:text-sky-600 text-sm hover:border-yellow-500 hover:border-b-2">Contact</a>
</li>
</ul>
</div>
</nav>
<main>
<!-- Banner Section -->
<div id="home" style="background-image: url('./assets/img/bgbanner.jpg') ;"
class="border-solid border-2 border-yellow-500 rounded-lg bg-cover bg-center bg-no-repeat">
<div class="text-center pt-40 sm:pt-72 space-y-5 pb-60">
<p class="text-white text-lg font-semibold">WELCOME</p>
<p class="text-white font-semibold text-2xl sm:text-4xl pb-3"><span class="text-textcolor font-bold">I'M
</span>GOPALAKRISHNAN💖
</p>
<div
class="bg-transparent border-solid imghover border-textcolor border-2 rounded-full text-yellow-400 p-2 w-56 ml-auto mr-auto sm:ml-auto sm:mr-auto">
<a href="https://github.com/Gopalakrishnan008" target="_blank" title="Github"
class="hover:text-yellow-500 font-semibold"> FrontEnd Developer...</a>
</div>
</div>
</div>
<!-- About Section -->
<div class="bg-bgcolor text-white border-solid border-2 rounded-xl border-yellow-500">
<h2 class="font-bold text-4xl p-5 text-center text-textcolor imghover" id="about">
About
</h2>
<div class=" p-5 space-x-14 flex flex-wrap justify-center">
<div>
<img src="./assets/img/myimg.jpg" alt="GOPALAKRISHNAN img"
class="w-56 h-56 ml-5 sm:w-60 sm:h52 imghover rounded-lg " />
<div class="flex space-x-3 ml-4 mt-5 sm:ml-2 sm:space-x-5">
<a href="https://www.facebook.com/profile.php?id=100027960270437&mibextid=gik2fB" class="imghover sm:hidden"
target="_blank" title="FACEBOOK">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 256 256">
<path fill="#1877F2"
d="M256 128C256 57.308 198.692 0 128 0C57.308 0 0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445" />
<path fill="#FFF"
d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A128.959 128.959 0 0 0 128 256a128.9 128.9 0 0 0 20-1.555V165z" />
</svg>
</a>
<a href="https://www.instagram.com/pe.a.ce_dude?igsh=c3dxNTU2OHF3NWt6" target="_blank" class="imghover"
title="INSTAGRAM">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="url(#skillIconsInstagram0)" rx="60" />
<rect width="256" height="256" fill="url(#skillIconsInstagram1)" rx="60" />
<path fill="#fff"
d="M128.009 28c-27.158 0-30.567.119-41.233.604c-10.646.488-17.913 2.173-24.271 4.646c-6.578 2.554-12.157 5.971-17.715 11.531c-5.563 5.559-8.98 11.138-11.542 17.713c-2.48 6.36-4.167 13.63-4.646 24.271c-.477 10.667-.602 14.077-.602 41.236s.12 30.557.604 41.223c.49 10.646 2.175 17.913 4.646 24.271c2.556 6.578 5.973 12.157 11.533 17.715c5.557 5.563 11.136 8.988 17.709 11.542c6.363 2.473 13.631 4.158 24.275 4.646c10.667.485 14.073.604 41.23.604c27.161 0 30.559-.119 41.225-.604c10.646-.488 17.921-2.173 24.284-4.646c6.575-2.554 12.146-5.979 17.702-11.542c5.563-5.558 8.979-11.137 11.542-17.712c2.458-6.361 4.146-13.63 4.646-24.272c.479-10.666.604-14.066.604-41.225s-.125-30.567-.604-41.234c-.5-10.646-2.188-17.912-4.646-24.27c-2.563-6.578-5.979-12.157-11.542-17.716c-5.562-5.562-11.125-8.979-17.708-11.53c-6.375-2.474-13.646-4.16-24.292-4.647c-10.667-.485-14.063-.604-41.23-.604zm-8.971 18.021c2.663-.004 5.634 0 8.971 0c26.701 0 29.865.096 40.409.575c9.75.446 15.042 2.075 18.567 3.444c4.667 1.812 7.994 3.979 11.492 7.48c3.5 3.5 5.666 6.833 7.483 11.5c1.369 3.52 3 8.812 3.444 18.562c.479 10.542.583 13.708.583 40.396c0 26.688-.104 29.855-.583 40.396c-.446 9.75-2.075 15.042-3.444 18.563c-1.812 4.667-3.983 7.99-7.483 11.488c-3.5 3.5-6.823 5.666-11.492 7.479c-3.521 1.375-8.817 3-18.567 3.446c-10.542.479-13.708.583-40.409.583c-26.702 0-29.867-.104-40.408-.583c-9.75-.45-15.042-2.079-18.57-3.448c-4.666-1.813-8-3.979-11.5-7.479s-5.666-6.825-7.483-11.494c-1.369-3.521-3-8.813-3.444-18.563c-.479-10.542-.575-13.708-.575-40.413c0-26.704.096-29.854.575-40.396c.446-9.75 2.075-15.042 3.444-18.567c1.813-4.667 3.983-8 7.484-11.5c3.5-3.5 6.833-5.667 11.5-7.483c3.525-1.375 8.819-3 18.569-3.448c9.225-.417 12.8-.542 31.437-.563zm62.351 16.604c-6.625 0-12 5.37-12 11.996c0 6.625 5.375 12 12 12s12-5.375 12-12s-5.375-12-12-12zm-53.38 14.021c-28.36 0-51.354 22.994-51.354 51.355c0 28.361 22.994 51.344 51.354 51.344c28.361 0 51.347-22.983 51.347-51.344c0-28.36-22.988-51.355-51.349-51.355zm0 18.021c18.409 0 33.334 14.923 33.334 33.334c0 18.409-14.925 33.334-33.334 33.334c-18.41 0-33.333-14.925-33.333-33.334c0-18.411 14.923-33.334 33.333-33.334" />
<defs>
<radialGradient id="skillIconsInstagram0" cx="0" cy="0" r="1"
gradientTransform="matrix(0 -253.715 235.975 0 68 275.717)" gradientUnits="userSpaceOnUse">
<stop stop-color="#FD5" />
<stop offset=".1" stop-color="#FD5" />
<stop offset=".5" stop-color="#FF543E" />
<stop offset="1" stop-color="#C837AB" />
</radialGradient>
<radialGradient id="skillIconsInstagram1" cx="0" cy="0" r="1"
gradientTransform="matrix(22.25952 111.2061 -458.39518 91.75449 -42.881 18.441)"
gradientUnits="userSpaceOnUse">
<stop stop-color="#3771C8" />
<stop offset=".128" stop-color="#3771C8" />
<stop offset="1" stop-color="#60F" stop-opacity="0" />
</radialGradient>
</defs>
</g>
</svg>
</a>
<a href="https://www.linkedin.com/in/gopal08?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"
target="_blank" class="imghover" title="LINKEDIN">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#fff" rx="60" />
<rect width="256" height="256" fill="#0A66C2" rx="60" />
<path fill="#fff"
d="M184.715 217.685h29.27a4 4 0 0 0 4-3.999l.015-61.842c0-32.323-6.965-57.168-44.738-57.168c-14.359-.534-27.9 6.868-35.207 19.228a.32.32 0 0 1-.595-.161V101.66a4 4 0 0 0-4-4h-27.777a4 4 0 0 0-4 4v112.02a4 4 0 0 0 4 4h29.268a4 4 0 0 0 4-4v-55.373c0-15.657 2.97-30.82 22.381-30.82c19.135 0 19.383 17.916 19.383 31.834v54.364a4 4 0 0 0 4 4M38 59.628c0 11.864 9.767 21.626 21.632 21.626c11.862-.001 21.623-9.769 21.623-21.631C81.253 47.761 71.491 38 59.628 38C47.762 38 38 47.763 38 59.627m6.959 158.058h29.307a4 4 0 0 0 4-4V101.66a4 4 0 0 0-4-4H44.959a4 4 0 0 0-4 4v112.025a4 4 0 0 0 4 4" />
</g>
</svg>
</a>
<a href="https://wa.me/+916380787499?text=hi Gopalakrishnan!!!" target="_blank" class="imghover" title="Whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" width="28.76" height="28" viewBox="0 0 256 258"><defs><linearGradient id="logosWhatsappIcon0" x1="50%" x2="50%" y1="100%" y2="0%"><stop offset="0%" stop-color="#1FAF38"/><stop offset="100%" stop-color="#60D669"/></linearGradient><linearGradient id="logosWhatsappIcon1" x1="50%" x2="50%" y1="100%" y2="0%"><stop offset="0%" stop-color="#F9F9F9"/><stop offset="100%" stop-color="#FFF"/></linearGradient></defs><path fill="url(#logosWhatsappIcon0)" d="M5.463 127.456c-.006 21.677 5.658 42.843 16.428 61.499L4.433 252.697l65.232-17.104a122.994 122.994 0 0 0 58.8 14.97h.054c67.815 0 123.018-55.183 123.047-123.01c.013-32.867-12.775-63.773-36.009-87.025c-23.23-23.25-54.125-36.061-87.043-36.076c-67.823 0-123.022 55.18-123.05 123.004"/><path fill="url(#logosWhatsappIcon1)" d="M1.07 127.416c-.007 22.457 5.86 44.38 17.014 63.704L0 257.147l67.571-17.717c18.618 10.151 39.58 15.503 60.91 15.511h.055c70.248 0 127.434-57.168 127.464-127.423c.012-34.048-13.236-66.065-37.3-90.15C194.633 13.286 162.633.014 128.536 0C58.276 0 1.099 57.16 1.071 127.416m40.24 60.376l-2.523-4.005c-10.606-16.864-16.204-36.352-16.196-56.363C22.614 69.029 70.138 21.52 128.576 21.52c28.3.012 54.896 11.044 74.9 31.06c20.003 20.018 31.01 46.628 31.003 74.93c-.026 58.395-47.551 105.91-105.943 105.91h-.042c-19.013-.01-37.66-5.116-53.922-14.765l-3.87-2.295l-40.098 10.513z"/><path fill="#FFF" d="M96.678 74.148c-2.386-5.303-4.897-5.41-7.166-5.503c-1.858-.08-3.982-.074-6.104-.074c-2.124 0-5.575.799-8.492 3.984c-2.92 3.188-11.148 10.892-11.148 26.561c0 15.67 11.413 30.813 13.004 32.94c1.593 2.123 22.033 35.307 54.405 48.073c26.904 10.609 32.379 8.499 38.218 7.967c5.84-.53 18.844-7.702 21.497-15.139c2.655-7.436 2.655-13.81 1.859-15.142c-.796-1.327-2.92-2.124-6.105-3.716c-3.186-1.593-18.844-9.298-21.763-10.361c-2.92-1.062-5.043-1.592-7.167 1.597c-2.124 3.184-8.223 10.356-10.082 12.48c-1.857 2.129-3.716 2.394-6.9.801c-3.187-1.598-13.444-4.957-25.613-15.806c-9.468-8.442-15.86-18.867-17.718-22.056c-1.858-3.184-.199-4.91 1.398-6.497c1.431-1.427 3.186-3.719 4.78-5.578c1.588-1.86 2.118-3.187 3.18-5.311c1.063-2.126.531-3.986-.264-5.579c-.798-1.593-6.987-17.343-9.819-23.64"/></svg>
</a>
<a href="https://github.com/Gopalakrishnan008" target="_blank" class="imghover" title="Github">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256">
<g fill="none">
<rect width="256" height="256" fill="#242938" rx="60" />
<path fill="#fff"
d="M128.001 30C72.779 30 28 74.77 28 130.001c0 44.183 28.653 81.667 68.387 94.89c4.997.926 6.832-2.169 6.832-4.81c0-2.385-.093-10.262-.136-18.618c-27.82 6.049-33.69-11.799-33.69-11.799c-4.55-11.559-11.104-14.632-11.104-14.632c-9.073-6.207.684-6.079.684-6.079c10.042.705 15.33 10.305 15.33 10.305c8.919 15.288 23.394 10.868 29.1 8.313c.898-6.464 3.489-10.875 6.349-13.372c-22.211-2.529-45.56-11.104-45.56-49.421c0-10.918 3.906-19.839 10.303-26.842c-1.039-2.519-4.462-12.69.968-26.464c0 0 8.398-2.687 27.508 10.25c7.977-2.215 16.531-3.326 25.03-3.364c8.498.038 17.06 1.149 25.051 3.365c19.087-12.939 27.473-10.25 27.473-10.25c5.443 13.773 2.019 23.945.98 26.463c6.412 7.003 10.292 15.924 10.292 26.842c0 38.409-23.394 46.866-45.662 49.341c3.587 3.104 6.783 9.189 6.783 18.519c0 13.38-.116 24.149-.116 27.443c0 2.661 1.8 5.779 6.869 4.797C199.383 211.64 228 174.169 228 130.001C228 74.771 183.227 30 128.001 30M65.454 172.453c-.22.497-1.002.646-1.714.305c-.726-.326-1.133-1.004-.898-1.502c.215-.512.999-.654 1.722-.311c.727.326 1.141 1.01.89 1.508m4.919 4.389c-.477.443-1.41.237-2.042-.462c-.654-.697-.777-1.629-.293-2.078c.491-.442 1.396-.235 2.051.462c.654.706.782 1.631.284 2.078m3.374 5.616c-.613.426-1.615.027-2.234-.863c-.613-.889-.613-1.955.013-2.383c.621-.427 1.608-.043 2.236.84c.611.904.611 1.971-.015 2.406m5.707 6.504c-.548.604-1.715.442-2.57-.383c-.874-.806-1.118-1.95-.568-2.555c.555-.606 1.729-.435 2.59.383c.868.804 1.133 1.957.548 2.555m7.376 2.195c-.242.784-1.366 1.14-2.499.807c-1.13-.343-1.871-1.26-1.642-2.052c.235-.788 1.364-1.159 2.505-.803c1.13.341 1.871 1.252 1.636 2.048m8.394.932c.028.824-.932 1.508-2.121 1.523c-1.196.027-2.163-.641-2.176-1.452c0-.833.939-1.51 2.134-1.53c1.19-.023 2.163.639 2.163 1.459m8.246-.316c.143.804-.683 1.631-1.864 1.851c-1.161.212-2.236-.285-2.383-1.083c-.144-.825.697-1.651 1.856-1.865c1.183-.205 2.241.279 2.391 1.097" />
</g>
</svg>
</a>
<a href="https://mail.google.com/mail/u/1/?view=cm&fs=1&to=gopalakrishnan638078@gmail.com.com&tf=1" target="_blank" class="imghover" title="Gmail">
<svg xmlns="http://www.w3.org/2000/svg" width="32.45" height="32" viewBox="0 0 256 193"><path fill="#4285F4" d="M58.182 192.05V93.14L27.507 65.077L0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455z"/><path fill="#34A853" d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837l-27.026 25.798z"/><path fill="#EA4335" d="m58.182 93.14l-4.174-38.647l4.174-36.989L128 69.868l69.818-52.364l4.669 34.992l-4.669 40.644L128 145.504z"/><path fill="#FBBC04" d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945z"/><path fill="#C5221F" d="m0 49.504l26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23z"/></svg>
</a>
</div>
</div>
<div class="font-serif space-y-2 sm:space-y-3 pt-5 sm:pt-0">
<p>GOPALAKRISHNAN💖</p>
<p>FrontEnd Developer</p>
<p><b>Age :</b> 20</p>
<p><b>Gender :</b> Male</p>
<p><b>From :</b> Erode</p>
<p><b>Degree :</b>Diploma in CSE</p>
<p><b>Lives In :</b>Erode, TamilNadu</p>
<p><b>EXPERIENCE:</b>Fresher</p>
</div>
</div>
<p class="p-5 text-center sm:text-center sm:pl-40 sm:pr-40">
"Aspiring Frontend Developer | Recent graduate passionate about
creating engaging and user-friendly web experiences. Proficient in
HTML, CSS, and JavaScript with a strong foundation in responsive
design. Eager to contribute my skills and enthusiasm for innovative
frontend development. Excited to learn and grow in a collaborative and
dynamic team environment. Open to opportunities."
</p>
</div>
<!-- Skills Section -->
<div class="bg-bgcolor text-white border-solid border-2 border-yellow-500 rounded-xl" id="skills">
<h3 class="text-textcolor p-5 text-2xl font-bold text-center imghover">
skills
</h3>
<div class="flex justify-evenly flex-wrap text-yellow-500 text-center font-semibold ">
<div class="imghover">
<a href="https://www.w3schools.com/html/" target="_blank"><img src="./assets/img/html.png"
title="Hyper Text Markup Language" class="w-40 h-44 rounded-lg" /></a>
<h2 class="mt-1 mb-5">HTML5</h2>
</div>
<div class="imghover">
<a href="https://www.w3schools.com/css/" target="_blank"><img src="./assets/img/css.png"
title="Cascading stylesheet" alt="css" class="w-40 h-44 rounded-lg" /></a>
<h2 class="mt-1">CSS3</h2>
</div>
<div class="imghover">
<a href="https://www.w3schools.com/js/DEFAULT.asp" target="_blank">
<img src="./assets/img/javascript.png" title="JavaScript" alt="javascript" class="w-40 h-44 rounded-lg" /></a>
<h2 class="mb-5 mt-1">JavaScript</h2>
</div>
<div class="imghover">
<a href="https://getbootstrap.com/" target="_blank">
<img src="./assets/img/bootstrap.png" title="Bootstrap" alt="Bootstrap"
class="w-40 h-44 rounded-lg" /></a>
<h2 class="mt-1">Bootstrap</h2>
</div>
<div class="imghover">
<a href="https://tailwindcss.com/" target="_blank">
<img src="./assets/img/tailwinscss.png" title="TailwindCss-Framework" alt="tailwindcss"
class="w-40 h-44 rounded-lg" /></a>
<h2 class="mt-1">TailwindCss-Framework</h2>
</div>
</div>
</div>
<!-- Projects Section -->
<div id="projects"
class="text-white text-center pt-5 bg-bgcolor border-solid border-2 border-yellow-500 rounded-xl ">
<div>
<h2 class=" text-textcolor font-bold text-2xl imghover">Projects</h2>
</div>
<div class="flex flex-wrap justify-evenly p-5">
<div class="w-40 imghover">
<a href="https://gopalakrishnan008.github.io/Whatsapp-UI/" target="_blank" title="Whatsapp-UI">
<img src="./assets/img/whatsapp.jpg" alt="whatsapp-img" class="rounded-lg">
<h2 class="text-yellow-500 font-bold">WHATSAPP-UI</h2>
</a>
</div>
<div class="w-40 mt-6 items-center imghover">
<a href="https://gopalakrishnan008.github.io/Movie-Hub/" target="_blank" title="Movies-hub-ui">
<img src="./assets/img/movieshub.png" alt="movieshub-img">
<h2 class="text-yellow-500 font-bold">MovieHub-Webpage-ui</h2>
</a>
</div>
<div class="w-40 mt-6 items-center justify-center imghover">
<a href="https://gopalakrishnan008.github.io/guess-my-number/" target="_blank" title="Guess-My-Number-Game">
<img src="./assets/img/guess.png" alt="Guess-My-Number-img">
<h2 class="text-yellow-500 font-bold">Guess-My-Number</h2>
</a>
</div>
</div>
</div>
<!-- Contact Section -->
<div>
<form id="contactus"
class="pb-6 text-center font-semibold w-full pt-5 bg-bgcolor border-solid border-2 border-yellow-500 rounded-xl">
<h3 class="text-textcolor p-5 text-2xl font-bold text-center imghover ">
Contact US
</h3>
<div class="space-y-5">
<div class="flex flex-col items-center">
<label for="FirstName" class="text-yellow-500">Your Name:</label>
<input id="name" type="text" placeholder="Name" required class="w-72 sm:w-96 bg-gray-300 rounded-md outline-none p-1 ">
</div>
<div class="flex flex-col items-center">
<label for="email" class="text-yellow-500">E-Mail:</label>
<input id="email" type="email" placeholder="G-Mail" required class="w-72 sm:w-96 bg-gray-300 rounded-md outline-none p-1">
</div>
<div class="flex flex-col items-center ">
<label for="textarea" aria-required="true" class="text-yellow-500">Write Your Feedback...</label>
<textarea id="message" name="feedback" placeholder="Write Your FeedBack"
class="w-72 sm:w-96 h-28 p-2 bg-gray-300 rounded-md outline-none"></textarea>
</div>
<button onclick="sendemail()" type="button" class="bg-textcolor imghover hover:bg-sky-500 p-2 rounded-md text-white">Send
Message</button>
</div>
</form>
<!-- top scrooler -->
<div class="right-20 bottom-24 sm:right-14 sm:bottom-20 fixed">
<a href="#nav" title="home">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"
class="absolute text-white bg-textcolor rounded-full p-1">
<path fill="currentColor"
d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8l316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496" />
</svg>
</a>
</div>
</div>
</main>
<!-- Footer Section -->
<footer>
<p class="bg-bgcolor text-center text-white p-2 border-solid border-2 border-yellow-500 rounded-xl ">
Copyright © 2024. Designed and Devloped by <a href="https://github.com/Gopalakrishnan008" target="_blank"
class="text-textcolor hover:text-sky-500">Gopalakrishnan...</a> </span>
</p>
</footer>
<script>
const btnEl = document.getElementById('mobileNavBtn');
const listEl = document.getElementById('mobileNav');
btnEl.addEventListener('click', () => {
listEl.classList.toggle('toggle')
});
</script>
<script>
function sendemail(){
var email=document.getElementById("email").value;
var from_name=document.getElementById("name").value;
var message=document.getElementById("message").value;
var templateParams = {
email_id: email,
from_name: from_name,
message: message
};
emailjs.send('service_a0de3uo', 'template_jw86gg3', templateParams)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
window.alert("Sent successfully!");
location.reload();
})
}
</script>
</body>
</html>