-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
248 lines (237 loc) · 24.2 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
<!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">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="app.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Web Tools</title>
</head>
<body class="bg-[#fdfcff] dark:bg-[#0a192f] dark:text-[#fff] overflow-x-hidden font-[Poppins] duration-300">
<header class="header fixed top-0 z-50 bg-[#ffffff] dark:bg-[#172a46] w-full h-[60px] shadow-[rgba(0,_0,_0,_.05)_0_5px_30px_0]">
<div class="text-lg">
<span class="float-left m-4 text-[#5f3afc] font-semibold md:mx-6 lg:mx-8 xl:mx-10 2xl:mx-12">web tools</span>
<span class="float-right m-4 md:mx-6 lg:mx-8 xl:mx-10 2xl:mx-12"><i class="toggle fa-solid fa-circle-half-stroke cursor-pointer text-slate-400"></i></span>
</div>
</header>
<section class="m-5 mt-20 md:mx-8 lg:mx-10 xl:mx-14 2xl:mx-18">
<!-- <img class="absolute w-12 rounded-full top-[320px] left-[80px] shadow-[rgb(0_0_0_/10%)_10px_10px_40px_0px]" src="img/element1.png" alt="">
<img class="absolute w-12 rounded-full top-[320px] left-[270px] shadow-[rgb(0_0_0_/10%)_10px_10px_40px_0px]" src="img/element2.png" alt="">
<img class="absolute w-12 rounded-full top-[380px] left-[320px] shadow-[rgb(0_0_0_/10%)_10px_10px_40px_0px]" src="img/element3.png" alt="">
<img class="absolute w-12 rounded-full top-[380px] left-[20px] shadow-[rgb(0_0_0_/10%)_10px_10px_40px_0px]" src="img/element4.png" alt="">
<img class="absolute w-12 -z-50 rounded-full top-[320px] left-[50px] shadow-[rgb(0_0_0_/10%)_10px_10px_40px_0px]" src="img/element5.png" alt=""> -->
<div class="block md:grid md:grid-cols-2">
<p class="p-2 text-[35px] lg:text-[40px] xl:text-[50px] 2xl:text-[50px] font-extrabold dark:text-[#fff] text-slate-800 lg:mx-10 xl:mx-14 2xl:mx-20 animate__animated animate__fadeInLeft">Welcome to the <span class="underline decoration-[#aa97ff] decoration-4 text-[#5f3afc]">only</span> website you need for <span class="underline decoration-[#aa97ff] decoration-4 text-[#5f3afc]">online tools</span>.</p>
<img class="lg:object-contain lg:h-[450px] lg:w-[450px] lg:mx-10 xl:mx-14 2xl:mx-32 animate__animated animate__fadeInRight" src="img/hero-elements.png" alt="hero-img">
</div>
</section>
<section class="w-full h-[500px] -mt-6">
<div class="">
<p class="text-center text-[30px] lg:text-[35px] xl:text-[45px] 2xl:text-[45px] font-extrabold text-slate-800 dark:text-[#fff]">Explore Tools</p>
</div>
<div class="grid grid-cols-1 place-items-center mt-8 md:grid-cols-2 md:p-16 lg:grid-cols-3 lg:gap-x-20 xl:gap-x-0 2xl:grid-cols-4">
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] mb-[30px] rounded-[20px] hover:outline hover:outline-[#5f3afc] duration-100 shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] animate__animated animate__fadeInUp wow">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/box-1.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">PNG to WEBP</p>
<p class="text-center text-md hover:text-[#5f3afc] cursor-pointer"><a>Try this tool</a></p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] mb-[30px] rounded-[20px] hover:outline hover:outline-[#5f3afc] duration-100 shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] animate__animated animate__fadeInUp wow">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/box-1.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">JPG to PNG</p>
<p class="text-center text-md hover:text-[#5f3afc] cursor-pointer"><a>Try this tool</a></p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] mb-[30px] rounded-[20px] hover:outline hover:outline-[#5f3afc] duration-100 shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] animate__animated animate__fadeInUp wow">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/box-1.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">WEBP to PNG</p>
<p class="text-center text-md hover:text-[#5f3afc] cursor-pointer"><a>Try this tool</a></p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] mb-[30px] rounded-[20px] hover:outline hover:outline-[#5f3afc] duration-100 shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] animate__animated animate__fadeInUp wow">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/box-2.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">Text Tools</p>
<p class="text-center text-md hover:text-[#5f3afc] cursor-pointer"><a href="https://ashish-makes.github.io/text-tools/" target="_blank">Try this tool</a></p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] mb-[30px] rounded-[20px] hover:outline hover:outline-[#5f3afc] duration-100 shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] animate__animated animate__fadeInUp wow">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/box-3.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">Video Downloader</p>
<p class="text-center text-md hover:text-[#5f3afc] cursor-pointer"><a>Try this tool</a></p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] mb-[30px] rounded-[20px] hover:outline hover:outline-[#5f3afc] duration-100 shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] animate__animated animate__fadeInUp wow">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/box-4.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">Password Generator</p>
<p class="text-center text-md hover:text-[#5f3afc] cursor-pointer"><a href="https://wowpassgen.netlify.app/" target="_blank">Try this tool</a></p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] mb-[30px] rounded-[20px] hover:outline hover:outline-[#5f3afc] duration-100 shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] animate__animated animate__fadeInUp wow">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/box-5.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">Encode/Decode</p>
<p class="text-center text-md hover:text-[#5f3afc] cursor-pointer"><a href="https://ashish-makes.github.io/encode-decode-base64/" target="_blank">Try this tool</a></p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] mb-[30px] rounded-[20px] hover:outline hover:outline-[#5f3afc] duration-100 shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] animate__animated animate__fadeInUp wow">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/box-6.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">Word Counter</p>
<p class="text-center text-md hover:text-[#5f3afc] cursor-pointer"><a href="https://ashish-makes.github.io/words-counter/" target="_blank">Try this tool</a></p>
</div>
</div>
</section>
<section class="mt-[2070px] md:mt-[930px] lg:mt-[650px] xl:mt-[650px] 2xl:mt-[320px] bg-[#f9f8ff] dark:bg-[#172a46] w-full h-[700px] md:h-[450px] pt-16">
<div class="grid grid-cols-1 place-items-center md:grid-cols-2">
<div>
<img class="block xl:h-[400px] xl:w-[400px] h-[350px] w-[350px] p-3 animate__animated animate__slideInLeft wow" src="img/about.svg" alt="hero-img">
</div>
<div>
<p class="text-[#5f3afc] -mt-5 px-3 text-center text-[25px] lg:text-[30px] xl:text-[35px] 2xl:text-[40px] font-extrabold 2xl:mr-32">We create tools that help developers, bloggers and creators.</p>
<p class="text-center text-[16px] md:text-[18px] lg:text-[20px] text-slate-800 dark:text-[#fff] p-5 2xl:mr-32 animate__animated animate__slideInUp wow">We offer tools such as online video downloader, image format convertors, text tools, passwords generators to make your life easier.</p>
</div>
</div>
</section>
<section class="">
<div class="">
<p class="my-10 text-center text-[30px] lg:text-[35px] xl:text-[45px] 2xl:text-[45px] font-extrabold text-slate-800 dark:text-[#fff]">Why us?</p>
</div>
<div class="grid grid-cols-1 place-items-center mt-8 md:grid-cols-2 md:p-16 lg:grid-cols-3 lg:gap-x-20 xl:gap-x-0 md:-mt-12 lg:-mt-16 xl:-mt-16 2xl:-mt-16">
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] md:w-[320px] lg:md:w-[360px] xl:md:w-[360px] mb-[30px] rounded-[20px] outline outline-slate-200 dark:outline-[#484b4f] outline-1 duration-100 animate__animated animate__fadeInUp wow hover:shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px]">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/feature-1.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">Free to use</p>
<p class="text-center text-md px-3">You can use any tool for free.</p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] md:w-[320px] lg:md:w-[360px] xl:md:w-[360px] mb-[30px] rounded-[20px] outline outline-slate-200 dark:outline-[#484b4f] outline-1 duration-100 animate__animated animate__fadeInUp wow hover:shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px]">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/feature-2.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">Easy to use</p>
<p class="text-center text-md px-3">Simply select tool and use.</p>
</div>
<div class="bg-[#ffffff] dark:bg-[#172a46] w-[300px] h-[280px] md:w-[320px] lg:md:w-[360px] xl:md:w-[360px] mb-[30px] rounded-[20px] outline outline-slate-200 dark:outline-[#484b4f] outline-1 duration-100 animate__animated animate__fadeInUp wow hover:shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px]">
<img class="m-auto mt-10 w-[150px] h-[150px]" src="img/feature-3.svg" alt="box-1">
<p class="text-center text-lg font-semibold text-[#5f3afc]">Fast Speed</p>
<p class="text-center text-md px-3">Our tools are free but speedy.</p>
</div>
</section>
<section class="w-full h- bg-[#f9f8ff] dark:bg-[#172a46] h-[900px] md:h-[660px] lg:h-[450px]">
<div class="pt-5">
<p class="my-10 text-center text-[30px] lg:text-[35px] xl:text-[45px] 2xl:text-[45px] font-extrabold text-slate-800 dark:text-[#fff]">People love our tools!</p>
</div>
<div class="grid grid-cols-1 place-items-center mt-8 md:grid-cols-2 md:p-16 lg:grid-cols-3 lg:gap-x-20 xl:gap-x-0 md:-mt-12 lg:-mt-16 xl:-mt-16 2xl:-mt-16 duration-300 animate__animated animate__fadeInRight wow">
<div class="w-[300px] h-[200px] 2xl:w-[380px] bg-[#f9f8ff] dark:bg-[#172a46] dark:hover:bg-[#5f3afc] hover:bg-[#ffffff] duration-300 rounded-[20px] shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] mb-[30px]">
<img class="m-[25px] w-[50px] rounded-full bg-white outline outline-1 outline-[#5f3afc] shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px]" src="img/pf1.svg" alt="profile-1">
<svg class="float-right m-[25px] -mt-[70px] text-[#876cff] dark:text-[#ffffff] dark:opacity-50 fill-current opacity-30" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
<p class="text-ellipsis text-md px-5 2xl:px-8 -mt-2 z-50">I am using this website for 2 years now and there is no issues. I recommend it to everyone.</p>
</div>
<div class="w-[300px] h-[200px] 2xl:w-[380px] bg-[#f9f8ff] hover:bg-[#ffffff] dark:bg-[#172a46] dark:hover:bg-[#5f3afc] rounded-[20px] shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] mb-[30px] duration-300 animate__animated animate__fadeInRight wow">
<img class="m-[25px] w-[50px] rounded-full bg-white outline outline-1 outline-[#5f3afc] shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px]" src="img/pf2.svg" alt="profile-1">
<svg class="float-right m-[25px] -mt-[70px] text-[#876cff] dark:text-[#ffffff] dark:opacity-50 fill-current opacity-30" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
<p class="text-ellipsis text-md px-5 2xl:px-8 -mt-2 z-50">As a developer i use this website daily as it offers me all the tools i need at a single place.</p>
</div>
<div class="w-[300px] h-[200px] 2xl:w-[380px] bg-[#f9f8ff] hover:bg-[#ffffff] dark:bg-[#172a46] dark:hover:bg-[#5f3afc] rounded-[20px] shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px] mb-[30px] duration-300 animate__animated animate__fadeInRight wow">
<img class="m-[25px] w-[50px] rounded-full bg-white outline outline-1 outline-[#5f3afc] shadow-[rgb(0_0_0_/2%)_10px_10px_40px_0px]" src="img/pf3.svg" alt="profile-1">
<svg class="float-right m-[25px] -mt-[70px] text-[#876cff] dark:text-[#ffffff] dark:opacity-50 fill-current opacity-30" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path d="M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z"/></svg>
<p class="text-ellipsis text-md px-5 2xl:px-8 -mt-2 z-50">Thanks to this website as i saves a lot of time online using these tools.</p>
</div>
</div>
</section>
<section class="w-full md:h-[580px] xl:h-[620px] 2xl:h-[700px]">
<div class="grid grid-cols-1 place-items-center md:grid-cols-2">
<div class="">
<p class="mt-10 mb-4 mx-5 text-center text-[30px] lg:text-[35px] font-extrabold text-slate-800 dark:text-[#5f3afc] 2xl:px-32">Talk to us! We are there to help you.</p>
<p class="my-2 text-center text-md px-5 -mt-2 z-50 2xl:px-44">Want to talk? We are available 24/7 for you. Contact us using this form.</p>
<img class="mx-auto md:h-[350px] md:w-[350px] xl:h-[400px] xl:w-[400px] h-[300px] w-[300px] p-3 animate__animated animate__slideInLeft wow" src="img/contact.svg" alt="contact-img">
</div>
<div>
<form class="mt-16 text-center duration-300" onsubmit="Validate()" action="">
<input class="name bg-[#f9f8ff] dark:bg-[#172a46] outline-none border border-gray-300 dark:border-[#172a46] h-[30px] lg:w-[300px] xl:w-[400px] p-5 rounded-[10px] focus:border-[#5f3afc] focus:border-2 duration-100 mb-5" required type="texr" placeholder="Name"><br>
<input class="email bg-[#f9f8ff] dark:bg-[#172a46] outline-none border border-gray-300 dark:border-[#172a46] h-[30px] lg:w-[300px] xl:w-[400px] p-5 rounded-[10px] focus:border-[#5f3afc] focus:border-2 duration-100 mb-5" required type="email" placeholder="Email"><br>
<!-- <input class="bg-[#f9f8ff] outline-none border border-gray-300 h-[30px] p-5 rounded-[10px] focus:border-[#5f3afc] focus:border-2 duration-100 mb-5" type="number" placeholder="Phone Number"> -->
<textarea class="message bg-[#f9f8ff] dark:bg-[#172a46] outline-none border border-gray-300 dark:border-[#172a46] lg:w-[300px] xl:w-[400px] p-5 rounded-[10px] focus:border-[#5f3afc] focus:border-2 duration-100 resize-none" required type="text" rows="6" cols="23" placeholder="type your message here..."></textarea><br>
<button class="send bg-[#5f3afc] text-white mt-3 h-[40px] w-[250px] rounded-[10px] lg:w-[300px] xl:w-[400px] shadow-[rgb(0_0_0_/3%)_10px_10px_40px_0px] hover:shadow-[rgb(0_0_0_/6%)_10px_10px_40px_0px]" type="submit">Send</button>
</form>
</div>
</div>
</section>
<footer class="w-full bg-[#f9f8ff] dark:bg-[#172a46] h-[750px] md:h-[420px] 2xl:h-[250px] mt-16">
<div class="grid grid-cols-1 mx-12 mt-8 md:grid-cols-2 md:p-16 lg:grid-cols-3 2xl:grid-cols-4 md:gap-x-10 lg:gap-x-20 xl:gap-x-8 2xl:gap-x-10 md:-mt-12 lg:-mt-16 xl:-mt-16 2xl:-mt-16 mb-5 duration-300">
<div class="my-10 md:-my-5">
<p class="text-[#5f3afc] font-bold text-[25px]">web tools</p>
<p class="my-2">We offer tools such as online video downloader, image format convertors, text tools, passwords generators to make your life easier.</p>
</div>
<div>
<p class="-mt-5 text-[#5f3afc] font-semibold text-[20px]">Tools</p>
<ul>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Text Tools</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Password Generator</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Encode/Decode</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Word Counter</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">More</a></li>
</ul>
</div>
<div>
<p class="mt-5 lg:-mt-5 text-[#5f3afc] font-semibold text-[20px]">Download our App</p>
<!-- <ul>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Text Tools</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Password Generator</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Encode/Decode</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Word Counter</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">More</a></li>
</ul> -->
<ul>
<li class="my-4"><a href="https://digishrink.com/" target="_blank"><button class="bg-[#f1eeff] dark:bg-[#0d1e39] h-[50px] w-[200px] rounded-[8px] outline outline-1 outline-[#5f3afc] hover:shadow-[rgb(0_0_0_/6%)_10px_10px_40px_0px] duration-300 flex">
<i class="fa-brands fa-google-play pt-2 pl-3 pr-2 text-[#876cff] text-2xl"></i>
<p class="pt-3">Google Play Store</p>
</button></a></li>
<li class="mt-4"><a href="https://digishrink.com/" target="_blank"><button class="bg-[#f1eeff] dark:bg-[#0d1e39] h-[50px] w-[200px] rounded-[8px] outline outline-1 outline-[#5f3afc] hover:shadow-[rgb(0_0_0_/6%)_10px_10px_40px_0px] duration-300 flex">
<i class="fa-brands fa-app-store-ios pt-2 pl-3 pr-2 text-[#876cff] text-2xl"></i>
<p class="pt-3 ml-4">App Store</p>
</button></a></li>
</ul>
</div>
<div>
<p class="mt-5 lg:mt-10 xl:mt-5 2xl:-mt-5 text-[#5f3afc] font-semibold text-[20px]">Join us</p>
<!-- <ul>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Text Tools</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Password Generator</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Encode/Decode</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">Word Counter</a></li>
<li><a class="hover:text-[#5f3afc] duration-300" href="">More</a></li>
</ul> -->
<ul class="flex gap-5">
<li class="my-4"><a href="https://digishrink.com/" target="_blank"><button class="bg-[#f1eeff] dark:bg-[#0d1e39] h-[40px] w-[40px] rounded-[8px] outline outline-1 outline-[#5f3afc] hover:shadow-[rgb(0_0_0_/6%)_10px_10px_40px_0px] duration-300 flex">
<i class="fa-brands fa-discord m-auto text-[#876cff] dark:text-[#ffffff] text-2xl"></i>
<!-- <p class="pt-3">Google Play Store</p> -->
</button></a></li>
<li class="mt-4"><a href="https://digishrink.com/" target="_blank"><button class="bg-[#f1eeff] dark:bg-[#0d1e39] h-[40px] w-[40px] rounded-[8px] outline outline-1 outline-[#5f3afc] hover:shadow-[rgb(0_0_0_/6%)_10px_10px_40px_0px] duration-300 flex">
<i class="fa-brands fa-youtube m-auto text-[#876cff] dark:text-[#ffffff] text-2xl"></i>
<!-- <p class="pt-3 ml-4">App Store</p> -->
</button></a></li>
<li class="mt-4"><a href="https://github.com/ashish-makes" target="_blank"><button class="bg-[#f1eeff] dark:bg-[#0d1e39] h-[40px] w-[40px] rounded-[8px] outline outline-1 outline-[#5f3afc] hover:shadow-[rgb(0_0_0_/6%)_10px_10px_40px_0px] duration-300 flex">
<i class="fa-brands fa-github m-auto text-[#876cff] dark:text-[#ffffff] text-2xl"></i>
<!-- <p class="pt-3 ml-4">App Store</p> -->
</button></a></li>
<li class="mt-4"><a href="https://digishrink.com/" target="_blank"><button class="bg-[#f1eeff] dark:bg-[#0d1e39] h-[40px] w-[40px] rounded-[8px] outline outline-1 outline-[#5f3afc] hover:shadow-[rgb(0_0_0_/6%)_10px_10px_40px_0px] duration-300 flex">
<i class="fa-brands fa-telegram m-auto text-[#876cff] dark:text-[#ffffff] text-2xl"></i>
<!-- <p class="pt-3 ml-4">App Store</p> -->
</button></a></li>
</ul>
<p>Copyright ©<script>document.write(new Date().getFullYear())</script> <span class="text-[#5f3afc] text-justify"><a href="https://live-tools.netlify.app/" target="_blank">Web Tools</a></span> All Rights Reserved</p>
</div>
</div>
<!-- <p class="text-center m-4 text-sm"> Copyright ©<script>document.write(new Date().getFullYear())</script> <span class="text-[#b5d2ff]">Moviewind</span> All Rights Reserved</p> -->
<div class="bg-[#f1eeff] dark:bg-[#0d1e39] w-full h-[40px] py-2 text-center text-sm md:-mt-12 lg:-mt-[75px] xl:-mt-10 2xl:-mt-10"><p class="p-1">Designed with 💜 by <span class="text-[#5f3afc]"><a href="https://github.com/ashish-makes" target="_blank">Ashish</a></span></p></div>
</footer>
<!-- <script>
// function Validate(){
// Name = document.querySelector(".name");
// Email = document.querySelector(".email");
// Message = document.querySelector(".message");
// sendButton = document.querySelector(".send");
// if (Name.value == ""){
// Name.classList.add('border-red')
// }
// }
</script>-->
</body>
</html>