forked from dilipomi/centrex_interface
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
406 lines (394 loc) · 18.3 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
<!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">
<title>Centrex - Web3 Tittle</title>
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<nav id="nav">
<div class="brand">
<img src="images/Brand.png" alt="Centrex">
<span>Centrex</span>
</div>
<div class="menu">
<a class="loginb" href="login.html">Login</a>
<a class="regb" href="register.html">Start Investing</a>
</div>
<div class="rectangle" id="rectangle"></div>
</nav>
<div class="finalcontainer">
<div class="text1">
<h5># First official cryptocurrency retail-outlet in the world</h5>
<h2>Deposit, <br>Invest, <br><span>Earn.</span></h2>
<h2 id="jquery">Deposit, Invest, <br><span>Earn.</span></h2>
</div>
<div class="xxbox">
<img class="a" src="images/A.png" alt="">
<img class="c" src="images/C.png" alt="">
<img class="b" src="images/B.png" alt="">
<img class="d" src="images/D.png" alt="">
</div>
<div class="centrexdeco">
<div class="star1-1 xstar">✦</div>
<div class="star2-1 xstar">✦</div>
<div class="star3-1 xstar">✦</div>
</div>
<div class="scroll">
<img id="mouse" src="images/Mouse.png" alt="">
<span>Scroll</span>
</div>
<div class="upperlight"></div>
<div id="scene">
<div class="bglogo">
<img src="images/logo.gif">
</div>
</div>
</div>
<div class="scrollopacity" id="sc"></div>
<div class="whitebox" id="x"></div>
<div class="container fixedbox" id="test">
<!-- Progress Bar -->
<div class="path"id="progressbar">
<div class="path1">
<div class="leftbox">
<span>Passive Earnings</span>
</div>
<div class="circlebox">
<div class="circle"></div>
</div>
</div>
<div class="path2">
<div class="leftbox">
<span>Secure Operation</span>
</div>
<div class="circlebox">
<div class="circle"></div>
</div>
</div>
<div class="path3">
<div class="leftbox">
<span>Secure Invest</span>
</div>
<div class="circlebox">
<div class="circle"></div>
</div>
</div>
<div class="whitebar"></div>
<div class="progressbar"></div>
</div>
<!-- first path ########################## -->
<div class="pathway1" id="stage1">
<h2 class="trend">Trending Stakes Market</h2>
<div class="features">
<div class="feature1">
<div class="star">✦</div>
<h5>Highest APYs</h5>
<p>Annual returns <br> up to 70%</p>
</div>
<div class="feature2">
<div class="star">✦</div>
<h5>Fast Operation</h5>
<p>Annual returns <br> up to 70%</p>
</div>
<div class="feature3">
<div class="star">✦</div>
<h5>Secure Stake</h5>
<p>Annual returns <br> up to 70%</p>
</div>
<div class="feature4">
<div class="star">✦</div>
<h5>Flexible & Locked</h5>
<p>Annual returns <br> up to 70%</p>
</div>
</div>
<div class="centrexdeco2">
<span class="star1-2 xstar">✦</span>
<span class="star2-2 xstar">✦</span>
<span class="star3-2 xstar">✦</span>
</div>
</div>
<!-- second path -->
<div class="wayy2">
<div class="text3">
<h2>Buy, Sell & <br>Withdraw <br>Easily.</h2>
<span>Deposit, Invest and Withdraw your earnings <br> in less than 48hours.</span>
</div>
<div class="box">
<div id="Buy_Crypto">
<span>Buy Crypto</span>
</div>
<div id="Invest">
<span>Invest</span>
</div>
<div id="Earn_Passive_Money">
<span>Earn Passive<br/>Money</span>
</div>
<div id="Withdraw">
<span>Withdraw : :</span>
</div>
<svg class="Trazado_59_bm" viewBox="-17726.039 5377.048 208.238 73.893">
<linearGradient id="Trazado_59_bm" spreadMethod="pad" x1="0.083" x2="0.965" y1="0.077" y2="1">
<stop offset="0" stop-color="#131316" stop-opacity="1"></stop>
<stop offset="1" stop-color="#616163" stop-opacity="1"></stop>
</linearGradient>
<path id="Trazado_59_bm" d="M -17518.802734375 5450.94140625 C -17519.3203125 5450.94140625 -17519.759765625 5450.541015625 -17519.798828125 5450.01513671875 C -17519.80078125 5449.98974609375 -17520.04296875 5447.16015625 -17522.080078125 5442.48583984375 C -17523.96484375 5438.1630859375 -17527.80859375 5431.3359375 -17535.4296875 5423.361328125 C -17549.474609375 5408.6669921875 -17565.6328125 5399.2568359375 -17593.05859375 5389.7998046875 C -17617.111328125 5381.50537109375 -17641.236328125 5379.06689453125 -17661.279296875 5379.06689453125 C -17669.466796875 5379.06689453125 -17676.96875 5379.47314453125 -17683.51171875 5380.0537109375 C -17696.29296875 5381.1875 -17706.833984375 5383.08935546875 -17713.427734375 5384.48583984375 C -17720.556640625 5385.99560546875 -17724.70703125 5387.2490234375 -17724.748046875 5387.26171875 C -17724.845703125 5387.291015625 -17724.943359375 5387.30517578125 -17725.0390625 5387.30517578125 C -17725.46875 5387.30517578125 -17725.865234375 5387.02685546875 -17725.99609375 5386.59521484375 C -17726.15625 5386.06689453125 -17725.857421875 5385.50830078125 -17725.330078125 5385.34765625 C -17725.287109375 5385.3349609375 -17721.0546875 5384.056640625 -17713.841796875 5382.52880859375 C -17707.1953125 5381.12158203125 -17696.568359375 5379.2041015625 -17683.6875 5378.0615234375 C -17676.07421875 5377.38623046875 -17668.50390625 5377.04833984375 -17661.03515625 5377.04833984375 C -17654.30078125 5377.04833984375 -17647.65234375 5377.32275390625 -17641.125 5377.8720703125 C -17623.908203125 5379.32177734375 -17607.517578125 5382.69873046875 -17592.40625 5387.9091796875 C -17578.7421875 5392.62060546875 -17568.216796875 5397.19140625 -17559.28125 5402.29296875 C -17554.44140625 5405.05615234375 -17550.0703125 5407.96630859375 -17545.916015625 5411.19091796875 C -17541.69140625 5414.470703125 -17537.787109375 5418 -17533.984375 5421.9794921875 C -17530.509765625 5425.61474609375 -17527.5 5429.330078125 -17525.0390625 5433.02294921875 C -17523.0625 5435.98779296875 -17521.4296875 5438.94677734375 -17520.189453125 5441.81689453125 C -17518.052734375 5446.76318359375 -17517.8125 5449.7431640625 -17517.802734375 5449.86767578125 C -17517.763671875 5450.41845703125 -17518.17578125 5450.89794921875 -17518.7265625 5450.9384765625 C -17518.751953125 5450.9404296875 -17518.77734375 5450.94140625 -17518.802734375 5450.94140625 Z">
</path>
</svg>
<svg class="Trazado_60_bo" viewBox="-1 -0.998 185.228 65.313">
<linearGradient id="Trazado_60_bo" spreadMethod="pad" x1="1.007" x2="0.059" y1="0.347" y2="0.873">
<stop offset="0" stop-color="#131316" stop-opacity="1"></stop>
<stop offset="1" stop-color="#616163" stop-opacity="1"></stop>
</linearGradient>
<path id="Trazado_60_bo" d="M 0.0009316028445027769 64.31499481201172 C -0.02014858275651932 64.31499481201172 -0.04129713773727417 64.31433868408203 -0.06262708455324173 64.31299591064453 C -0.613817572593689 64.27842712402344 -1.032627105712891 63.80354690551758 -0.998055636882782 63.25235748291016 C -0.9907461404800415 63.13592910766602 -0.799603283405304 60.34733200073242 0.9006824493408203 55.70661926269531 C 1.888920545578003 53.00940322875977 3.18915867805481 50.22833251953125 4.765301704406738 47.44068908691406 C 6.729277610778809 43.96704864501953 9.130705833435059 40.47135543823242 11.9028491973877 37.05071258544922 C 14.93846797943115 33.30500030517578 18.05396842956543 29.9829044342041 21.42739677429199 26.89459419250488 C 24.7451343536377 23.85726165771484 28.23699188232422 21.11554718017578 32.10249328613281 18.51278495788574 C 39.23934936523438 13.70728492736816 47.64356231689453 9.403166770935059 58.55106353759766 4.967452049255371 C 64.89630126953125 2.387071132659912 71.85366058349609 0.6224282383918762 79.22985076904297 -0.2775241434574127 C 85.92108154296875 -1.093881487846375 93.10689544677734 -1.217190623283386 100.5876312255859 -0.644024133682251 C 113.1584167480469 0.3191663324832916 126.7871551513672 3.24214243888855 141.0953216552734 8.043713569641113 C 153.8097076416016 12.31042861938477 164.72265625 17.30323791503906 171.6385803222656 20.7403564453125 C 179.1388702392578 24.46790504455566 183.7021331787109 27.22923851013184 183.7473449707031 27.2567138671875 C 184.2193908691406 27.54333305358887 184.3696899414062 28.15833282470703 184.0830841064453 28.63040351867676 C 183.7965087890625 29.10246658325195 183.1814880371094 29.25284767150879 182.7093505859375 28.96626091003418 C 182.6646423339844 28.93911933898926 178.1512298583984 26.2088565826416 170.7119903564453 22.51326179504395 C 163.8507080078125 19.10473823547363 153.025634765625 14.15423774719238 140.4195861816406 9.926570892333984 C 126.6837692260742 5.320012092590332 109.1518096923828 1.043058276176453 91.42367553710938 1.043058276176453 C 80.51271057128906 1.043058276176453 69.53017425537109 2.661724328994751 59.30446624755859 6.82011890411377 C 37.48501586914062 15.69338035583496 24.63046836853027 24.52230834960938 13.45665836334229 38.30995178222656 C 7.34413480758667 45.8524055480957 4.276063442230225 52.30759429931641 2.778610944747925 56.3946647644043 C 1.177253842353821 60.76535797119141 0.9996348023414612 63.35195159912109 0.9980396032333374 63.37757110595703 C 0.9647830724716187 63.90743255615234 0.5246112942695618 64.31495666503906 0.0009316028445027769 64.31499481201172 Z">
</path>
</svg>
<svg class="Trazado_61" viewBox="0 0 172.332 58.675">
<path id="Trazado_61" d="M 172.3320922851562 33.30458831787109 C 172.3320922851562 33.30458831787109 103.8684005737305 72.75856018066406 56.13312530517578 53.26475143432617 C 37.61275863647461 45.70112991333008 25.01301383972168 37.77081680297852 14.10751438140869 24.2583065032959 C 3.203338384628296 10.74546527862549 0 0 0 0">
</path>
</svg>
</div>
</div>
<!-- third path -->
<div class="wayy3"">
<div class="text4">
<h2>Secure your <br>
Money, easy <br>
Invest.</h2>
<span>We deposit your money in unknown and completely blocked <br>
addresses, securing your investment.</span>
<a href="">Learn More</a>
</div>
<div class="stakebox">
<h3>Stake Locked Crypto</h3>
<span class="sep">Amount</span>
<h5>$32,328.32</h5>
<span class="sep2">Withdraw in</span>
<h5>1 MONTH</h5>
<div class="ad">
<span>Staked!</span>
<div class="xcircle">
<img src="images/XRP_Logo.png" alt="Ripple Logo">
</div>
</div>
</div>
</div>
</div>
<div class="container-bar"></div>
<div class="container finalcontainer fcs" id="finalx">
<div class="text1">
<h5># First official cryptocurrency retail-outlet in the world</h5>
<h2>Start for <br>free, <span>today.</span></h2>
<h2 id="jquery">Start for free, <br><span>today.</h2>
<a href="register.html">Start Investing</a>
</div>
<div class="xxbox fxbox">
<img class="a" src="images/A.png" alt="">
<img class="c" src="images/C.png" alt="">
<img class="d" src="images/D.png" alt="">
<img class="b" src="images/B.png" alt="">
</div>
<!--
<div class="centrexdeco">
<span>Centrex</span>
<div class="whitebar"></div>
<div class="violetbar"></div>
<div class="star1-1">✦</div>
<div class="star2-1">✦</div>
<div class="star3-1">✦</div>
</div>
-->
<div class="scroll">
<img id="mouse" src="images/Mouse.png" alt="">
<span>Scroll</span>
</div>
<div class="upperlight"></div>
<div id="scene">
<div class="bglogo">
<img src="images/logo.gif">
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
var timeline = new TimelineLite({repeat:-1});
timeline.to(".scroll", 2, {y:10});
timeline.to(".scroll", 2, {y:0});
var component1 = new TimelineLite ({repeat:-1});
component1.to(".b, .c", 4, {y:10})
component1.to(".b, .c", 4, {y:0})
var component2 = new TimelineLite ({ repeat:-1});
component2.to(".d", 6, {y:-15})
component2.to(".d", 6, {y:0})
var stars = new TimelineLite ({ repeat:-1});
stars.to(".xstar", 3, {y:-15})
stars.to(".xstar", 3, {y:0})
var stars2 = new TimelineLite ({ repeat:-1});
stars2.to(".xstar2", 3, {y:15})
stars2.to(".xstar2", 3, {y:0})
gsap.to(".scroll",{
scrollTrigger:{
trigger: ".scrollopacity",
toggleActions: "restart none none reverse"
},
filter: "invert(100%)",
"font-weight":"700",
duration: 0.3
})
gsap.to(".scroll",{
scrollTrigger:{
trigger: ".fcs",
toggleActions:"restart reverse restart reverse"
},
opacity: 0,
duration: 0.3
})
//Test
var tl = gsap.timeline({
scrollTrigger: {
scrub: 1,
trigger: ".whitebox",
toggleActions:"restart reverse restart reverse"
},
lazy:false,
immediateRender: false,
defaults: { duration: 1 } // This gets passed to each tween
})
.to(".pathway1",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse",
scrub:2,
start: "500 bottom",
end: "500 top",
},
lazy:false,
immediateRender: false,
marginTop: "-15vh",
transform:"rotateX(0deg)"
})
.to(".pathway1",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse",
scrub:2,
start: "2000 bottom",
end: "2000 top",
},
lazy:false,
immediateRender: false,
marginTop:"-70vh",
transform:"rotateX(70deg)"
})
.to(".wayy2",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse",
scrub:2,
start: "2400 bottom",
end: "2400 top",
},
immediateRender: false,
transform:"rotateX(0deg)"
})
.to(".wayy2",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse",
scrub:2,
start: "4000 bottom",
end: "4000 top",
},
marginTop:"-80vh",
immediateRender: false,
transform:"rotateX(70deg)"
})
.to(".wayy3",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse",
scrub:2,
start: "4400 bottom",
end: "4400 top",
},
marginTop:"-20vh",
immediateRender: false,
transform:"rotateX(0deg)"
})
.to(".wayy3",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse",
scrub:2,
start: "6000 bottom",
end: "6000 top",
},
marginTop:"-120vh",
immediateRender: false,
transform:"rotateX(70deg)"
})
//Progressbar GSAP
gsap.to(".path",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse restart reverse",
start: "500 center",
end: "500 top",
scrub: 1,
},
immediateRender: false,
opacity:"100%"
})
gsap.to(".progressbar",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse restart reverse",
start: "500 center",
end: "2450 top",
scrub: 1,
},
immediateRender: false,
height: "95px"
})
gsap.to(".progressbar",{
scrollTrigger:{
trigger:".whitebox",
toggleActions:"restart reverse restart reverse",
start: "2450 center",
end: "4350 top",
scrub: 1,
},
immediateRender: false,
height: "190px"
})
//Decoration
gsap.to(".xstar",{
scrollTrigger:{
trigger:".whitebox",
scrub:2,
start: "500 bottom",
end: "700 top",
},
immediateRender: false,
rotation:30,
})
gsap.to(".star",{
scrollTrigger:{
trigger:".whitebox",
},
immediateRender: false,
yoyo:true,
repeat:-1,
repeatDelay:0.5,
transform:"rotateY(180deg)",
ease: "SlowMo"
})
</script>
</html>