-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
198 lines (187 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/04dbeda3fe.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
<nav class="lg:h-[10vh] bg-[#FFFFFF] w-full shadow-lg shadow-indigo-500/40 fixed py-3 lg:py-0">
<div class="container mx-auto flex justify-between items-center h-full flex-wrap gap-2 md:gap-0">
<div class="mx-auto lg:mx-0">
<img class="w-[200px] overflow-hidden" src="images/Logo.svg" alt="">
</div>
<ul class="flex md:gap-8 gap-2 text-lg text-[#252526] font-medium mx-auto lg:m-0 flex-wrap pl-2 lg:pl-0 mt-3 lg:mt-0">
<li>
<a href="#">
Freelancer <span class="text-sm text-gray-500 ml-1"><i
class="fa-solid fa-less-than -rotate-90"></i></span>
</a>
</li>
<li>
<a href="#">
Business
<span class="text-sm text-gray-500 ml-1"><i class="fa-solid fa-less-than -rotate-90"></i></span>
</a>
</li>
<li>
<a href="#">
Marketplace <span class="text-sm text-gray-500 ml-1"><i
class="fa-solid fa-less-than -rotate-90"></i></span>
</a>
</li>
<li>
<a href="#">
Sing In
</a>
</li>
<li class="header-btn text-white pl-6 rounded-full pb-1 lg:pr-0 pr-3">
<a href="#">
Register <span class="text-md text-gray-500 ml-1 md:inline hidden"><i class="fa-solid fa-arrow-right"></i></span>
</a>
</li>
</ul>
</div>
</nav>
<header class="">
<div class="h-[100vh] w-full bg-cover bg-no-repeat bg-center bg-blend-multiply bg-[#D05AA2] lg:pt-[20vh] blur-sm relative bg-fixed"
style="background-image: url(images/header-bg.jpg);">
</div>
<div
class="text-white w-[90%] lg:w-[50%] h-full flex justify-center flex-col mx-auto gap-8 absolute top-0 left-0 bottom-0 right-0 text-center z-10">
<h1 class="text-4xl md:text-6xl text-white">Business payments for today’s global economy</h1>
<p class="text-[#fff] font-thin text-xl md:text-2xl">The Payoneer multi-currency account has everything your business
needs to pay, get paid, and grow globally.</p>
<button
class="header-btn w-[200px] mx-auto p-3 rounded-full hover:bg-gradient-to-l duration-300 text-[#fff]">Open
your accound</button>
</div>
<img class="absolute top-[50%] left-[10%] w-[100px] z-0" src="images/butterfly.gif" alt="">
<img class="absolute top-[10vh] right-0 w-[200px] z-0" src="images/sun.gif" alt="">
</header>
<section class="container mx-auto mt-16">
<div class="grid md:grid-cols-3 lg:gap-6 gap-4">
<div class="bg-blue-600 text-white p-3 mx-2 md:p-8 text-center rounded-lg">
<h3 class="text-xl md:text-3xl">Deposit</h3>
<h4 class="text-2xl md:text-5xl font-medium">$ <span id="Deposit-total">000</span></h4>
</div>
<div class="bg-yellow-500 text-white p-3 mx-2 md:p-8 text-center rounded-lg">
<h3 class="text-xl md:text-3xl">Withdraw</h3>
<h4 class="text-2xl md:text-5xl font-medium">$ <span id="Withdraw-total">000</span></h4>
</div>
<div class="bg-green-600 text-white p-3 mx-2 md:p-8 text-center rounded-lg">
<h3 class="text-xl md:text-3xl">Balance</h3>
<h4 class="text-2xl md:text-5xl font-medium">$ <span id="Balance-total">000</span></h4>
</div>
</div>
<div class="grid md:grid-cols-2 gap-5 lg:gap-6 lg:mt-6 mt-12">
<div class="bg-lime-600 text-white p-3 lg:p-8 rounded-lg space-y-4">
<h3 class="text-3xl "> Please Deposit Your Amount</h3>
<input id="Deposit-input" class="w-full lg:w-3/4 h-8 rounded mx-auto text-black py-5 px-2 lg:p-6 outline-none border-2 focus:border-red-500" type="number" placeholder="please Give Deposit Amount">
<button id="Deposit-button" class="text-white bg-blue-800 rounded font-medium px-3 py-2 block"> Deposit</button>
</div>
<div class="bg-red-400 text-white p-3 lg:p-8 rounded-lg space-y-4">
<h3 class="text-3xl "> Please Withdraw Your Amount</h3>
<input id="Withdraw-input" class="w-full lg:w-3/4 h-8 rounded mx-auto text-black py-5 px-2 lg:p-6 outline-none border-2 focus:border-red-500" type="number" placeholder="please Give Withdraw Amount">
<button id="Withdraw-button" class="text-white bg-fuchsia-800 rounded font-medium px-3 py-2 block ">Withdraw</button>
</div>
</div>
</section>
<footer class="container mx-auto mt-10">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 p-2 mt-2 pb-10 justify-center m-auto items-center ml-10 sm:ml-0">
<div data-aos="fade-right" class="aos-init aos-animate">
<!-- <h2 class="text-red-500 text-3xl">Dharia</h2> -->
<img class="w-[180px]" src="images/Logo.svg" alt="">
<h4 class="mt-10 dark:text-sky-400 text-red-700 hover:underline duration-300 text-lg">My social link
</h4>
<ul class="flex gap-3 py-5">
<li class="text-4xl text-[#000] bg-white rounded-full hover:text-red-500 duration-300"><a
href="https://github.com/developer-mezbah"><svg stroke="currentColor" fill="currentColor"
stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</svg></a></li>
<li class="text-4xl text-[#087AEA] hover:text-red-500 duration-300"><a
href="https://www.facebook.com/mezbah.uddin.99"><svg stroke="currentColor"
fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<g id="Facebook">
<path
d="M19.02,4.975A9.93,9.93,0,0,0,2.07,12,9.935,9.935,0,0,0,12,21.935a9.98,9.98,0,0,0,3.8-.75,10.189,10.189,0,0,0,3.22-2.16,9.934,9.934,0,0,0,0-14.05Zm-.7,13.34A8.921,8.921,0,0,1,13,20.885v-6.56h1.88a1,1,0,0,0,0-2H13V9.585a1,1,0,0,1,1-1h1.2a1,1,0,0,0,0-2H13.5a2.5,2.5,0,0,0-2.5,2.5v3.24H9.13a1,1,0,1,0,0,2H11v6.56a8.919,8.919,0,1,1,9.26-5.47A9.061,9.061,0,0,1,18.32,18.315Z">
</path>
</g>
</svg></a></li>
<li class="text-4xl text-[#fff] bg-[#087AEA] rounded hover:text-red-500 duration-300"><a
href="#"><svg stroke="currentColor" fill="currentColor" stroke-width="0"
viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path
d="M847.7 112H176.3c-35.5 0-64.3 28.8-64.3 64.3v671.4c0 35.5 28.8 64.3 64.3 64.3h671.4c35.5 0 64.3-28.8 64.3-64.3V176.3c0-35.5-28.8-64.3-64.3-64.3zm0 736c-447.8-.1-671.7-.2-671.7-.3.1-447.8.2-671.7.3-671.7 447.8.1 671.7.2 671.7.3-.1 447.8-.2 671.7-.3 671.7zM230.6 411.9h118.7v381.8H230.6zm59.4-52.2c37.9 0 68.8-30.8 68.8-68.8a68.8 68.8 0 1 0-137.6 0c-.1 38 30.7 68.8 68.8 68.8zm252.3 245.1c0-49.8 9.5-98 71.2-98 60.8 0 61.7 56.9 61.7 101.2v185.7h118.6V584.3c0-102.8-22.2-181.9-142.3-181.9-57.7 0-96.4 31.7-112.3 61.7h-1.6v-52.2H423.7v381.8h118.6V604.8z">
</path>
</svg></a></li>
<li class="text-4xl text-[#32E6E2] hover:text-red-500 duration-300"><a
href="https://app.netlify.com/teams/mezbah-99/overview"><svg stroke="currentColor"
fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em"
width="1em" xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M6.49 19.04h-.23L5.13 17.9v-.23l1.73-1.71h1.2l.15.15v1.2L6.5 19.04ZM5.13 6.31V6.1l1.13-1.13h.23L8.2 6.68v1.2l-.15.15h-1.2L5.13 6.31Zm9.96 9.09h-1.65l-.14-.13v-3.83c0-.68-.27-1.2-1.1-1.23-.42 0-.9 0-1.43.02l-.07.08v4.96l-.14.14H8.9l-.13-.14V8.73l.13-.14h3.7a2.6 2.6 0 0 1 2.61 2.6v4.08l-.13.14Zm-8.37-2.44H.14L0 12.82v-1.64l.14-.14h6.58l.14.14v1.64l-.14.14Zm17.14 0h-6.58l-.14-.14v-1.64l.14-.14h6.58l.14.14v1.64l-.14.14ZM11.05 6.55V1.64l.14-.14h1.65l.14.14v4.9l-.14.14h-1.65l-.14-.13Zm0 15.81v-4.9l.14-.14h1.65l.14.13v4.91l-.14.14h-1.65l-.14-.14Z">
</path>
</svg></a></li>
</ul>
</div>
<div data-aos="fade-down-right" class="aos-init aos-animate">
<h4 class="mt-10 dark:text-sky-400 text-red-700 hover:underline duration-300 text-lg">My Experience is:-
</h4>
<ul class="ml-3 font-semibold">
<li class="hover:ml-3 duration-300">HTML</li>
<li class="hover:ml-3 duration-300">CSS</li>
<li class="hover:ml-3 duration-300">JAVASCRIPT</li>
<li class="hover:ml-3 duration-300">REACT</li>
<li class="hover:ml-3 duration-300">STATE MANAGEMENT REDUX</li>
<li class="hover:ml-3 duration-300">NODE.JS</li>
<li class="hover:ml-3 duration-300">MONGODB</li>
</ul>
</div>
<div data-aos="fade-down-left" class="aos-init aos-animate">
<h4 class="mt-10 dark:text-sky-400 text-red-700 hover:underline duration-300 text-lg">My personal
information:-</h4>
<ul class="ml-3 font-semibold">
<li class="hover:ml-3 duration-300">I'm Mezbah uddin</li>
<li class="hover:ml-3 duration-300">I'm a cse student</li>
<li class="hover:ml-3 duration-300">The collage name of ccn polytecnic institute</li>
<li class="hover:ml-3 duration-300">I am from bangladesh</li>
<li class="hover:ml-3 duration-300">This is my first project</li>
<li class="hover:ml-3 duration-300">I am a full stack web development</li>
<li class="hover:ml-3 duration-300">My Experience is 2 years</li>
</ul>
</div>
<div data-aos="fade-left" class="aos-init aos-animate">
<h4 class="mt-10 dark:text-sky-400 text-red-700 hover:underline duration-300 text-lg">The following
equipments have been used for this project:-</h4>
<li class="hover:ml-3 duration-300">React</li>
<li class="hover:ml-3 duration-300">node</li>
<li class="hover:ml-3 duration-300">Mongodb</li>
<li class="hover:ml-3 duration-300">npm multer</li>
<li class="hover:ml-3 duration-300">express</li>
<li class="hover:ml-3 duration-300">react-router-dom</li>
</div>
</div>
</footer>
</body>
</html>