-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
329 lines (271 loc) · 16.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NFT LANDING PAGE</title>
<link rel="stylesheet" href="./output.css">
</head>
<body class="bg-[#160E2A] text-white">
<!-- header start -->
<div class=" bg-gradient-to-br from-[#D464FB] from-5% via-[#5A29CB] via-30% to-[#160E2A] to-50% text-white ">
<!-- navbar start -->
<div class="flex flex-wrap justify-between items-center px-12 py-4 text-xl relative z-50 bg-gradient-to-tr">
<div>
<img src="./assets/logo.png" alt="">
</div>
<div class="flex gap-6 -mr-36">
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">MARKETPLACE</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">ABOUT</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">RESOURCES</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">FAQ</a>
</div>
<div class="flex gap-5">
<div class="bg-gradient-to-r from-blue-600 to-[#D464FB] inline p-1">
<BUtton class="bg-black text-white px-8 py-2 hover:font-bold focus:ring-4 focus:ring-green-600">Log In</BUtton>
</div>
<div class="bg-gradient-to-r from-blue-600 to-[#D464FB] inline p-1">
<BUtton class="bg-black text-white px-8 py-2 hover:font-bold focus:ring-4 focus:ring-green-600">Sign Up</BUtton>
</div>
</div>
</div>
<hr>
<!-- navbar end -->
<div class="flex flex-wrap gap-6 relative z-10">
<div class="w-3/6 px-12 mt-24">
<h1 class="text-7xl text-pink-200">Keep Calm & <br>Collect Your NFTs.</h1>
<p class="mt-16 text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, quisquam nulla dolores repellendus officiis sit optio suscipit ea est. Nisi omnis iure maiores quis voluptatem corporis recusandae perferendis dolores. Voluptates.</p>
<div class="mt-16 flex gap-6 w-6/12 items-center">
<img src="./assets/yt.png" alt="play-img">
<div>
<h3 class="font-bold text-2xl mb-2">Let's get started!</h3>
<p>Watch this quick demo video to see how to get started</p>
</div>
</div>
</div>
<div >
<img class="ml-24 z-10 -mt-16 " src="./assets/image.png" alt="img">
</div>
</div>
</div>
<!-- header end -->
<!-- map section start -->
<div class="">
<div class="flex justify-center text-5xl p-5">
<div class="flex h-20 w-20 bg-gradient-to-br from-[#D464FB] to-[#5A29CB] rounded-full"><p class="ml-8 mt-3">To</p>
</div>
<h1 class="mt-3">p Creators</h1>
</div>
<div class="flex justify-center absolute left-32 ">
<img src="./assets/map.png" alt="">
</div>
<img class="relative top-8 left-64 " src="./assets/person.png" alt="person">
<img class="relative -top-[50px] left-[1100px] " src="./assets/person.png" alt="person">
<img class="relative -top-[65px] left-[710px] " src="./assets/person.png" alt="person">
<img class="relative left-[710px]" src="./assets/person.png" alt="person">
<img class="relative top-[100px] left-[760px] " src="./assets/person.png" alt="person">
<img class="relative left-[520px] " src="./assets/person.png" alt="person">
<img class="relative -top-[300px] left-[500px] " src="./assets/person.png" alt="person">
</div>
<!-- map section end -->
<!-- collection section start -->
<div class="mt-64 flex justify-center gap-10 ">
<button class="hover:font-bold focus:ring-4 focus:ring-green-600" style="background: linear-gradient(#160E2A, #160E2A) padding-box, linear-gradient(to right, blue, #D464FB) border-box; border: 4px solid transparent; padding: 10px 25px; font-size: 25px; border-radius: 10px;">View All collectors</button>
</div>
<!-- collections -->
<div class="flex flex-wrap justify-between gap- mt-20 bg-gradient-to-r from-[#2e1835] from-5% to-[#160E2A] to-90% px-10 py-12">
<div>
<!-- img -->
<div class="flex gap-14">
<div class="h-72 w-60 border-2 text-xl ml-10">
<div class="h-60 -mt-10 ml-10 items-center w-56 flex justify-center bg-gradient-to-tr from-blue-600 to-[#D464FB] ">
<img class="" src="./assets/Image 1.png" alt="">
</div>
<h3 class="align-bottom ml-10 mt-6">Ancient Ones</h3>
<h3 class="ml-10">5.0 ETH</h3>
</div>
<div class="h-72 w-60 border-2 text-xl ml-10 mt-20">
<img class="ml-16 w-56 -mt-10" src="./assets/merlin.png" alt="person">
<h3 class="align-bottom ml-10 mt-6">Ancient Ones</h3>
<h3 class="ml-10">5.0 ETH</h3>
</div>
</div>
<div class="flex gap-14 mt-20">
<div class="h-72 w-60 border-2 text-xl ml-10 -mt-12">
<div class="h-60 -mt-10 ml-10 items-center w-56 flex justify-center bg-[#160E2A] ">
<img class="" src="./assets/Avatar 1.png" alt="">
</div>
<h3 class="align-bottom ml-10 mt-6">Ancient Ones</h3>
<h3 class="ml-10">5.0 ETH</h3>
</div>
<div class="h-72 w-60 border-2 text-xl ml-10 mt-12">
<img class="ml-16 w-56 -mt-10" src="./assets/Avatar2.png" alt="person">
<h3 class="align-bottom ml-10 mt-6">Ancient Ones</h3>
<h3 class="ml-10">5.0 ETH</h3>
</div>
</div>
</div>
<div class="w-2/5">
<!-- text -->
<div class="flex justify-center text-5xl p-5 mt-32">
<div class="flex h-20 w-20 bg-gradient-to-br from-[#D464FB] to-[#5A29CB] rounded-full -ml-28"><p class="ml-8 mt-3">La</p>
</div>
<h1 class="mt-3">test NFT Collections</h1>
</div>
<div class="text-2xl mt-16 text-green-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, tenetur voluptatibus incidunt repellat quis maiores quam. Sit autem esse odit quasi.
</div>
<div class="mt-24">
<button class="hover:font-bold focus:ring-4 focus:ring-green-600" style="background: linear-gradient(#160E2A, #160E2A) padding-box, linear-gradient(to right, blue, #D464FB) border-box; border: 4px solid transparent; padding: 10px 25px; font-size: 25px; border-radius: 10px;">View All collectors</button>
</div>
</div>
</div>
<!-- collection section end -->
<!-- why section start -->
<div class="flex justify-start gap-36 mt-40 py-32 flex-wrap border-l-0 border-4 border-b-purple-700 border-t-indigo-600 border-r-purple-600 rounded-r-full w-[90%] ">
<!-- text -->
<div class="w-2/5 ml-12">
<div class="flex justify-center text-5xl p-5 ">
<div class="flex h-20 w-20 bg-gradient-to-br from-[#D464FB] to-[#5A29CB] rounded-full -ml-40"><p class="ml-8 mt-3">W</p>
</div>
<h1 class="mt-3 ">hy Choose Us?</h1>
</div>
<div class="text-green-200 text-2xl mt-10">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero, aspernatur voluptatibus autem dignissimos illo vel mollitia non iusto iste officiis sint atque soluta debitis! Pariatur voluptate in accusantium magnam. Dolores.
</div>
<div class="text-green-200 mt-10 text-2xl">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia iure eligendi sunt ab. Dolores, placeat.
</div>
</div>
<!-- logo's -->
<div>
<div class="flex gap-10">
<div class="w-64 h-48 bg-gradient-to-tr drop-shadow-2xl from-[#3a2769] to-transparent from-20% to-10 border border-slate-700 flex flex-col justify-center items-center rounded-lg">
<img src="./assets/simple-icons_marketo.png" alt="marketplace">
<h2 class="mt-5 text-xl">Marketplace</h2>
</div>
<div class="w-64 h-48 bg-gradient-to-tr drop-shadow-2xl from-[#3a2769] to-transparent from-20% to-10 border border-slate-700 flex flex-col justify-center items-center rounded-lg">
<img src="./assets/Vector.png" alt="Protection">
<h2 class="mt-5 text-xl">Money Protection</h2>
</div>
</div>
<div class="flex mt-10 gap-10 ml-16">
<div class="w-64 h-48 bg-gradient-to-tr drop-shadow-2xl from-[#3a2769] to-transparent from-20% to-10 border border-slate-700 flex flex-col justify-center items-center rounded-lg">
<img src="./assets/Vector.png" alt="Protection">
<h2 class="mt-5 text-xl">Data Protection</h2>
</div>
<div class="w-64 h-48 bg-gradient-to-tr drop-shadow-2xl from-[#3a2769] to-[#3a2769] from-20% to-10 border border-slate-700 flex flex-col justify-center items-center rounded-lg">
<img src="./assets/healthicons.png" alt="Protection">
<h2 class="mt-5 text-xl">Fast & Secure</h2>
</div>
</div>
</div>
</div>
<!-- why section end -->
<!-- user section start -->
<div class="flex justify-center ml-48 text-5xl p-5 mt-32">
<div class="flex h-20 w-20 bg-gradient-to-br from-[#D464FB] to-[#5A29CB] rounded-full -ml-40"><p class="ml-8 mt-3">Cr</p>
</div>
<h1 class="mt-3 ">eate And Sell Your NFTs</h1>
</div>
<div class="flex flex-wrap gap-28 px-24 mt-32 mb-20 rounded-b-full">
<div class="text-lg w-1/6 flex flex-col justify-center items-center">
<div>
<img src="./assets/wallet-one.png" alt="wallet-one">
</div>
<h2 class="text-2xl my-8">Set Up Your Wallet</h2>
<p class="px-6">Once you've set up your wallet of choice,connect it to OpenSea by clicking the wallet. Learn about the wallets we support.</p>
</div>
<div class="text-lg w-1/6 flex flex-col justify-center items-center">
<div>
<img src="./assets/triangle-round-rectangle.svg" alt="wallet-one">
</div>
<h2 class="text-2xl my-8 ">Create Your Collection</h2>
<p class="px-6">Click My Collection and set up your collection. Add social links, a description, profile & banner images, and set a secondary sales fee.</p>
</div>
<div class="text-lg w-1/6 flex flex-col justify-center items-center">
<div>
<img src="./assets/picture.png" alt="wallet-one">
</div>
<h2 class="text-2xl my-8">Add Your NFTs</h2>
<p class="px-6">Upload your work (image, video, audio, or 3D art), add a title and description, and customize your NFTs with Properties, stats, and unlockable content.</p>
</div>
<div class="text-lg w-1/6 flex flex-col justify-center items-center">
<div>
<img src="./assets/shopping-bag.svg" alt="wallet-one">
</div>
<h2 class="text-2xl my-8">List Them For Sale</h2>
<p class="px-6">Choose between auctions, fixed-price listins and declining-price listings. You choose how you want to sell your NFTs, and we help you sell them!</p>
</div>
</div>
<!-- user section end -->
<!-- email section start -->
<div class="flex flex-col justify-center items-center pb-40 mb-10" style="background: linear-gradient(#160E2A, #160E2A) padding-box, linear-gradient(to right, blue, #D464FB) border-box; border-bottom: 4px solid transparent;">
<h1 class="text-5xl mt-32 mb-16">Ready for Next NFT Drop?</h1>
<input class="bg-black text-lg font-bold py-4 pl-20 pr-10 " placeholder="youremail@xyz.com" type="email">
<div class="mt-16">
<button class="hover:font-bold focus:ring-4 focus:ring-green-600" style="background: linear-gradient(#160E2A, #160E2A) padding-box, linear-gradient(to right, blue, #D464FB) border-box; border: 4px solid transparent; padding: 8px 45px; font-size: 22px; border-radius: 10px;">Send Email</button>
</div>
</div>
<!-- email section end -->
<!-- footer start -->
<div class="flex flex-wrap justify-start gap-10 px-16 py-20">
<!-- left part -->
<div class="w-2/5">
<div>
<img class="w-24" src="./assets/logo.png" alt="logo">
</div>
<h2 class="mt-10 text-2xl">Amazing NFTs marketplace, Authentic and unique digital creation.</h2>
<!-- social media logo's -->
<div class="flex gap-5 mt-20">
<div class="hover:ring-8 cursor-pointer hover:scale-110 h-14 w-14 border-2 border-[#7D7AD8] rounded-full flex items-center justify-center">
<img src="./assets/whatsapp.png" alt="whatsapp">
</div>
<div class="hover:ring-8 cursor-pointer hover:scale-110 h-14 w-14 border-2 border-[#7D7AD8] rounded-full flex items-center justify-center">
<img src="./assets/fb.png" alt="fb">
</div>
<div class="hover:ring-8 cursor-pointer hover:scale-110 h-14 w-14 border-2 border-[#7D7AD8] rounded-full flex items-center justify-center">
<img src="./assets/insta.png" alt="insta">
</div>
<div class="hover:ring-8 cursor-pointer hover:scale-110 h-14 w-14 border-2 border-[#7D7AD8] rounded-full flex items-center justify-center">
<img src="./assets/yt.png" alt="yt">
</div>
</div>
<h2 class="mt-14 text-xl text-slate-500">Copyright 2022 sapphire, All right reserved.</h2>
</div>
<!-- right part -->
<div class="flex flex-wrap pl-10 justify-between gap-20">
<div class="flex flex-col gap-16">
<h1 class="text-3xl">Markerplace</h1>
<div class="flex flex-col gap-10 text-2xl ">
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Explore</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">NFTs</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Collectibles</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Virtual Reality</a>
</div>
</div>
<div class="flex flex-col gap-16">
<h1 class="text-3xl">Resources</h1>
<div class="flex flex-col gap-10 text-2xl ">
<a class="hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Help Center</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Partners</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Blog</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Newssletter</a>
</div>
<h3 class="text-xl text-slate-500">Privcy Policy</h3>
</div>
<div class="flex flex-col gap-16">
<h1 class="text-3xl">Company</h1>
<div class="flex flex-col gap-10 text-2xl ">
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">About Us</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Careers</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Support</a>
<a class=" hover:font-bold hover:text-pink-500 focus:border-2 focus:rounded-3xl pl-5" href="">Newsletter</a>
</div>
<h3 class="text-xl text-slate-500">Terms & Conditions</h3>
</div>
</div>
</div>
<!-- footer end -->
</body>
</html>