├── README.md ├── bg.mp3 ├── css ├── large.css ├── main.css └── medium.css ├── fonts ├── logo.ttf └── nagasaki.ttf ├── img ├── Launch.svg ├── about.jpg ├── astronaut.jpeg ├── astronaut.png ├── bgs.gif ├── galaxy-space.gif ├── launch.png ├── reusable-rocket.jpg ├── reusable-rocket.png ├── section3-bg--large.jpg ├── simulation.jpg ├── space-bg-2.png ├── space-bg-3.jpeg ├── space-bg.png ├── space-station.png ├── star.png ├── starry.jpg ├── wave-white.png └── wave.png ├── index.html └── js ├── app.js ├── header.js ├── star.png └── three.min.js /README.md: -------------------------------------------------------------------------------- 1 | # Main-Website 2 | 3 | ![image](https://user-images.githubusercontent.com/64016811/200152718-04a86b9e-0cc6-4cf0-bf81-664a208efbad.png) 4 | -------------------------------------------------------------------------------- /bg.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/bg.mp3 -------------------------------------------------------------------------------- /css/large.css: -------------------------------------------------------------------------------- 1 | @import "main.css"; 2 | @import "medium.css"; 3 | 4 | @media screen and (min-width: 1000px) and (max-width: 1920px) and (-webkit-min-device-pixel-ratio: 1) { 5 | h1 { 6 | font-size: 7.594rem; 7 | } 8 | 9 | h2 { 10 | font-size: 5.063rem; 11 | } 12 | 13 | h3 { 14 | font-size: 3.375rem; 15 | } 16 | 17 | h4 { 18 | font-size: 2.25rem; 19 | } 20 | 21 | h5 { 22 | font-size: 1.5rem; 23 | } 24 | 25 | a { 26 | font-size: 1rem; 27 | } 28 | 29 | .active::after { 30 | left: 50%; 31 | transform: translate(-50%, -50%); 32 | writing-mode: horizontal-tb; 33 | font-size: calc(100vw / 4); 34 | } 35 | 36 | .grid { 37 | grid-gap: 5rem; 38 | } 39 | 40 | .grid__imagewrapper { 41 | height: 100%; 42 | } 43 | 44 | .grid:nth-of-type(odd) .grid__imagewrapper { 45 | grid-column: 2 / 3; 46 | grid-row-start: 1; 47 | } 48 | 49 | .grid__text { 50 | text-align: left; 51 | } 52 | 53 | .grid:nth-of-type(odd) .grid__text { 54 | grid-column: 1 / 2; 55 | grid-row-start: 1; 56 | } 57 | 58 | .active .bounce { 59 | animation: bounce 15s linear 2s infinite alternate; 60 | } 61 | 62 | @keyframes bounce { 63 | 0% { 64 | transform: translate(0, 0); 65 | } 66 | 33% { 67 | transform: translate(2vw, 2vh); 68 | } 69 | 66% { 70 | transform: translate(5vw, -5vh); 71 | } 72 | 100% { 73 | transform: translate(-2vw, -10vh); 74 | } 75 | } 76 | 77 | .active .float { 78 | animation-name: float, scale; 79 | animation-duration: 10s, 5s; 80 | animation-delay: 1s, 14s; 81 | animation-timing-function: linear, ease; 82 | animation-iteration-count: 1, infinite; 83 | animation-direction: normal, alternate; 84 | animation-fill-mode: forwards; 85 | } 86 | 87 | @keyframes float { 88 | 100% { 89 | transform: translate(5vw, -12vh); 90 | } 91 | } 92 | 93 | @keyframes scale { 94 | 0% { 95 | transform: scale(1, 1) translate(5vw, -12vh); 96 | } 97 | 100% { 98 | transform: scale(1.1, 1.1) translate(5vw, -12vh); 99 | } 100 | } 101 | 102 | .flex { 103 | padding: 120px 15vw; 104 | background-image: url(../img/section3-bg--large.jpg); 105 | } 106 | 107 | .footer { 108 | justify-content: space-between; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap'); 2 | @font-face { 3 | font-family: logoFont; 4 | src: url(../fonts/logo.ttf); 5 | } 6 | 7 | * { 8 | padding: 0; 9 | margin: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | :root { 14 | font-size: 16px; 15 | } 16 | 17 | html { 18 | scroll-behavior: smooth; 19 | } 20 | 21 | body { 22 | font-family: "Poppins", sans-serif; 23 | overflow-x: hidden; 24 | } 25 | 26 | /* width */ 27 | ::-webkit-scrollbar { 28 | width: 10px; 29 | 30 | } 31 | 32 | /* Track */ 33 | ::-webkit-scrollbar-track { 34 | background-color: black; 35 | } 36 | 37 | /* Handle */ 38 | ::-webkit-scrollbar-thumb { 39 | background:yellow; 40 | background-size: contain; 41 | background-repeat: no-repeat; 42 | border-radius: 5px; 43 | } 44 | 45 | /* Handle on hover */ 46 | ::-webkit-scrollbar-thumb:hover { 47 | background:orange; 48 | } 49 | 50 | h1 { 51 | font-size: 1.802rem; 52 | } 53 | 54 | h2 { 55 | font-size: 1.602rem; 56 | } 57 | 58 | h3 { 59 | font-size: 1.424rem; 60 | } 61 | 62 | h4 { 63 | font-size: 1.266rem; 64 | } 65 | 66 | h5 { 67 | font-size: 1.125rem; 68 | } 69 | 70 | h6 { 71 | font-size: 1rem; 72 | } 73 | 74 | a { 75 | font-size: 0.56rem; 76 | } 77 | 78 | canvas { 79 | position: absolute; 80 | top: 0; 81 | left: 0; 82 | /* z-index: 0; */ 83 | } 84 | 85 | section { 86 | min-height: 100vh; 87 | } 88 | 89 | .navbar { 90 | z-index: 999; 91 | position: fixed; 92 | padding: 1rem 10vw; 93 | width: 100vw; 94 | left: 0; 95 | right: 0; 96 | top: 0; 97 | transition: 0.2s all ease; 98 | overflow: hidden; 99 | } 100 | 101 | .navbar--dark { 102 | background: black; 103 | transition: 0.2s all ease; 104 | } 105 | 106 | .navbar__list { 107 | list-style-type: none; 108 | display: flex; 109 | justify-content: center; 110 | text-transform: uppercase; 111 | } 112 | 113 | .navbar__item { 114 | margin: 0 5vw; 115 | } 116 | 117 | .navbar__link { 118 | color: whitesmoke; 119 | text-decoration: none; 120 | transition: 0.2s color ease; 121 | } 122 | 123 | .navbar__link:hover { 124 | color: tomato; 125 | } 126 | 127 | span.underline { 128 | height: 5px; 129 | width: var(--linkWidth); 130 | background-color: tomato; 131 | position: absolute; 132 | left: var(--leftPos); 133 | transition: 0.5s left; 134 | bottom: 0; 135 | } 136 | 137 | .hero { 138 | padding: 90px 10vw; 139 | width: 100vw; 140 | height: 100vh; 141 | background: url(../img/galaxy-space.gif) center center / cover no-repeat black; 142 | overflow: hidden; 143 | display: flex; 144 | justify-content: center; 145 | align-items: center; 146 | text-align: center; 147 | } 148 | 149 | .hero__text { 150 | text-transform: uppercase; 151 | color: white; 152 | font-weight: bolder; 153 | z-index: 1; 154 | } 155 | #headw 156 | { 157 | font-family: Roboto; 158 | } 159 | .hero__heading { 160 | letter-spacing: 7px; 161 | word-spacing: 12px; 162 | } 163 | 164 | button 165 | { 166 | background-color: yellow; 167 | color:black; 168 | padding:15px; 169 | font-weight: bold; 170 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 171 | font-size: 23px; 172 | width: 200px; 173 | border-radius: 10px; 174 | } 175 | 176 | .hero__buttons { 177 | display: flex; 178 | flex-wrap: wrap; 179 | justify-content: center; 180 | align-items: center; 181 | padding: 20px; 182 | flex-direction: row; 183 | } 184 | 185 | .hero__button { 186 | display: block; 187 | font-weight: bold; 188 | padding: 1rem; 189 | margin: 0.5rem 1.2rem; 190 | letter-spacing: 5px; 191 | border: 1px solid white; 192 | cursor: pointer; 193 | position: relative; 194 | overflow: hidden; 195 | outline: none; 196 | color: white; 197 | text-decoration: none; 198 | } 199 | 200 | .hero__button span { 201 | position: relative; 202 | z-index: 1; 203 | transition: 1s; 204 | } 205 | 206 | .hero__button .wave { 207 | position: absolute; 208 | top: calc(100% + 21px); 209 | left: 0; 210 | width: 100%; 211 | height: 100%; 212 | background-color: white; 213 | transition: 1s; 214 | } 215 | 216 | .hero__button .wave:before { 217 | content: ""; 218 | position: absolute; 219 | top: -21px; 220 | left: 0; 221 | width: 100%; 222 | height: 22px; 223 | background: url(../img/wave-white.png); 224 | animation: wave 0.5s linear infinite; 225 | } 226 | 227 | .hero__button:hover .wave { 228 | top: 0; 229 | } 230 | 231 | .hero__button:hover span { 232 | color: black; 233 | } 234 | 235 | @keyframes wave { 236 | 0% { 237 | background-position-x: 0; 238 | } 239 | 100% { 240 | background-position-x: 118px; 241 | } 242 | } 243 | 244 | .active { 245 | background-color: #222; 246 | color: #d8d7ee; 247 | position: relative; 248 | z-index: 0; 249 | } 250 | 251 | .active::after { 252 | content: attr(data-nav); 253 | text-transform: uppercase; 254 | position: absolute; 255 | line-height: 0.7; 256 | left: 0; 257 | top: 50%; 258 | transform: translate(0, -50%); 259 | writing-mode: vertical-rl; 260 | opacity: 0.05; 261 | font-weight: 900; 262 | font-size: calc(100vh / 4); 263 | z-index: -1; 264 | 265 | } 266 | 267 | .grid { 268 | padding: 90px 10vw; 269 | display: grid; 270 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 271 | grid-gap: 2rem; 272 | transition: 0.1s all ease; 273 | place-items: center; 274 | overflow: hidden; 275 | } 276 | 277 | .grid__imagewrapper { 278 | width: 100%; 279 | height: 200px; 280 | position: relative; 281 | z-index: 0; 282 | } 283 | 284 | .space-1:after, 285 | .space-2:after, 286 | .space-3:after, 287 | .space-4:after, 288 | .space-5:after, 289 | .space-6:after { 290 | position: absolute; 291 | content: ""; 292 | width: 95%; 293 | height: 95%; 294 | background-size: cover; 295 | left: 0; 296 | top: 0; 297 | z-index: 1; 298 | } 299 | 300 | 301 | 302 | 303 | .grid__imagewrapper:before { 304 | position: absolute; 305 | content: ""; 306 | width: 95%; 307 | height: 95%; 308 | background: url("../img/bgs.gif"); 309 | top: 20px; 310 | z-index: 0; 311 | } 312 | 313 | .grid:nth-of-type(odd) .grid__imagewrapper:before { 314 | right: 10px; 315 | } 316 | 317 | .grid:nth-of-type(even) .grid__imagewrapper:before { 318 | left: 20px; 319 | } 320 | 321 | .grid__image { 322 | width: 100%; 323 | height: 100%; 324 | object-fit: contain; 325 | transition: 1s transform ease; 326 | position: absolute; 327 | z-index: 2; 328 | } 329 | 330 | .grid:nth-of-type(odd) .grid__image { 331 | transform: translate(10vh, -10vh); 332 | } 333 | 334 | .grid:nth-of-type(even) .grid__image { 335 | transform: translate(-10vh, 10vh); 336 | } 337 | 338 | .grid:nth-of-type(odd).active .grid__image, 339 | .grid:nth-of-type(even).active .grid__image { 340 | transform: translate(0, 0); 341 | } 342 | 343 | .active .bounce { 344 | animation: bounce 15s linear 2s infinite alternate; 345 | } 346 | 347 | @keyframes bounce { 348 | 0% { 349 | transform: translate(0, 0); 350 | } 351 | 100% { 352 | transform: translate(2rem, 2rem); 353 | } 354 | } 355 | 356 | .active .float { 357 | animation-name: float, scale; 358 | animation-duration: 10s, 5s; 359 | animation-delay: 1s, 14s; 360 | animation-timing-function: linear, ease; 361 | animation-iteration-count: 1, infinite; 362 | animation-direction: normal, alternate; 363 | animation-fill-mode: forwards; 364 | } 365 | 366 | @keyframes float { 367 | 100% { 368 | transform: translate(3rem, -0.5rem); 369 | } 370 | } 371 | 372 | @keyframes scale { 373 | 0% { 374 | transform: scale(1, 1) translate(3rem, -0.5rem); 375 | } 376 | 100% { 377 | transform: scale(1.1, 1.1) translate(3rem, -0.5rem); 378 | } 379 | } 380 | 381 | .active .pulse { 382 | animation: pulse 15s linear 1s infinite alternate; 383 | } 384 | 385 | @keyframes pulse { 386 | 100% { 387 | transform: translate(-1rem, -5rem); 388 | } 389 | } 390 | 391 | .grid__text, 392 | .flex__text { 393 | text-align: center; 394 | } 395 | 396 | .grid__title, 397 | .flex__title { 398 | padding: 1rem 0; 399 | } 400 | 401 | .grid__title::before, 402 | .flex__title::before { 403 | content: ""; 404 | display: inline-block; 405 | background: url("../img/section3-bg--large.jpg"); 406 | width: 22px; 407 | height: 5px; 408 | margin-right: calc(198px - 185px); 409 | } 410 | 411 | .grid__description, 412 | .flex__description { 413 | padding: 1rem 0; 414 | } 415 | 416 | .flex { 417 | padding: 90px 10vw; 418 | color: #d8d7ee; 419 | align-items: center; 420 | display: flex; 421 | background-image: url(../img/section3-bg.jpg); 422 | background-size: cover; 423 | } 424 | 425 | .footer { 426 | background-color: black; 427 | padding: 20px 10vw; 428 | color: whitesmoke; 429 | display: flex; 430 | flex-flow: row wrap; 431 | align-items: center; 432 | justify-content: center; 433 | text-align: center; 434 | } 435 | 436 | .logo { 437 | font-family: logoFont; 438 | cursor: pointer; 439 | font-size: 0; 440 | } 441 | 442 | .logo__letter { 443 | font-size: 1rem; 444 | animation: letterSpacing 10s ease-in-out 0s infinite alternate; 445 | animation-play-state: paused; 446 | display: inline-block; 447 | } 448 | 449 | .logo__letter:nth-child(1) { 450 | animation-duration: 1.9s; 451 | } 452 | 453 | .logo__letter:nth-child(2) { 454 | animation-duration: 2s; 455 | } 456 | 457 | .logo__letter:nth-child(3) { 458 | animation-duration: 2.3s; 459 | } 460 | 461 | .logo__letter:nth-child(4) { 462 | animation-duration: 2.4s; 463 | } 464 | 465 | .logo__letter:nth-child(5) { 466 | animation-duration: 2.1s; 467 | } 468 | .logo:hover .logo__letter { 469 | animation-play-state: running; 470 | } 471 | 472 | @keyframes letterSpacing { 473 | 100% { 474 | transform: translateY(-5px); 475 | } 476 | } 477 | 478 | .footer__list { 479 | list-style-type: none; 480 | display: flex; 481 | flex-flow: row wrap; 482 | justify-content: center; 483 | text-transform: uppercase; 484 | } 485 | 486 | .footer__item { 487 | margin: 1rem; 488 | } 489 | 490 | .footer__link { 491 | color: inherit; 492 | text-decoration: none; 493 | transition: 0.2s color ease; 494 | } 495 | 496 | .footer__link:hover { 497 | color: tomato; 498 | } 499 | 500 | .goTop { 501 | display: grid; 502 | place-items: center; 503 | width: 3rem; 504 | height: 3rem; 505 | border-radius: 50%; 506 | background: url(../img/Globe.svg); 507 | background-size: cover; 508 | position: fixed; 509 | bottom: -5rem; 510 | right: 5vw; 511 | cursor: pointer; 512 | transition: 0.5s bottom ease; 513 | } 514 | 515 | .goTop:hover .goTop__image { 516 | transform: translateY(-3rem); 517 | } 518 | 519 | .goTop__image { 520 | width: 100%; 521 | height: 100%; 522 | object-fit: contain; 523 | transform: translateY(-1rem); 524 | transition: 0.3s transform ease; 525 | } 526 | -------------------------------------------------------------------------------- /css/medium.css: -------------------------------------------------------------------------------- 1 | @import "main.css"; 2 | @import "medium.css"; 3 | 4 | @media screen and (min-width: 682px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 5 | h1 { 6 | font-size: 7.594rem; 7 | } 8 | 9 | h2 { 10 | font-size: 5.063rem; 11 | } 12 | 13 | h3 { 14 | font-size: 3.375rem; 15 | } 16 | 17 | h4 { 18 | font-size: 2.25rem; 19 | } 20 | 21 | h5 { 22 | font-size: 1.5rem; 23 | } 24 | 25 | a { 26 | font-size: 1rem; 27 | } 28 | 29 | .active::after { 30 | left: 50%; 31 | transform: translate(-50%, -50%); 32 | writing-mode: horizontal-tb; 33 | font-size: calc(100vw / 4); 34 | } 35 | 36 | .grid { 37 | grid-gap: 5rem; 38 | } 39 | 40 | .grid__imagewrapper { 41 | height: 100%; 42 | } 43 | 44 | .grid:nth-of-type(odd) .grid__imagewrapper { 45 | grid-row-start: 1; 46 | } 47 | 48 | .grid__text { 49 | text-align: left; 50 | height: 100%; 51 | display: flex; 52 | flex-flow: wrap column; 53 | justify-content: center; 54 | } 55 | 56 | .grid__title { 57 | display: flex; 58 | height: fit-content; 59 | align-items: center; 60 | padding: 1rem 0; 61 | justify-content: flex-start; 62 | } 63 | 64 | .active .bounce { 65 | animation: bounce 15s linear 2s infinite alternate; 66 | } 67 | 68 | @keyframes bounce { 69 | 0% { 70 | transform: translate(0, 0); 71 | } 72 | 33% { 73 | transform: translate(2vw, 2vh); 74 | } 75 | 66% { 76 | transform: translate(5vw, -5vh); 77 | } 78 | 100% { 79 | transform: translate(-2vw, -10vh); 80 | } 81 | } 82 | 83 | .active .float { 84 | animation-name: float, scale; 85 | animation-duration: 10s, 5s; 86 | animation-delay: 1s, 14s; 87 | animation-timing-function: linear, ease; 88 | animation-iteration-count: 1, infinite; 89 | animation-direction: normal, alternate; 90 | animation-fill-mode: forwards; 91 | } 92 | 93 | @keyframes float { 94 | 100% { 95 | transform: translate(5vw, -12vh); 96 | } 97 | } 98 | 99 | @keyframes scale { 100 | 0% { 101 | transform: scale(1, 1) translate(5vw, -12vh); 102 | } 103 | 100% { 104 | transform: scale(1.1, 1.1) translate(5vw, -12vh); 105 | } 106 | } 107 | 108 | .flex { 109 | padding: 120px 15vw; 110 | background-image: url(../img/section3-bg--large.jpg); 111 | } 112 | 113 | .footer { 114 | justify-content: space-between; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /fonts/logo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/fonts/logo.ttf -------------------------------------------------------------------------------- /fonts/nagasaki.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/fonts/nagasaki.ttf -------------------------------------------------------------------------------- /img/Launch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /img/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/about.jpg -------------------------------------------------------------------------------- /img/astronaut.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/astronaut.jpeg -------------------------------------------------------------------------------- /img/astronaut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/astronaut.png -------------------------------------------------------------------------------- /img/bgs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/bgs.gif -------------------------------------------------------------------------------- /img/galaxy-space.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/galaxy-space.gif -------------------------------------------------------------------------------- /img/launch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/launch.png -------------------------------------------------------------------------------- /img/reusable-rocket.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/reusable-rocket.jpg -------------------------------------------------------------------------------- /img/reusable-rocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/reusable-rocket.png -------------------------------------------------------------------------------- /img/section3-bg--large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/section3-bg--large.jpg -------------------------------------------------------------------------------- /img/simulation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/simulation.jpg -------------------------------------------------------------------------------- /img/space-bg-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/space-bg-2.png -------------------------------------------------------------------------------- /img/space-bg-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/space-bg-3.jpeg -------------------------------------------------------------------------------- /img/space-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/space-bg.png -------------------------------------------------------------------------------- /img/space-station.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/space-station.png -------------------------------------------------------------------------------- /img/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/star.png -------------------------------------------------------------------------------- /img/starry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/starry.jpg -------------------------------------------------------------------------------- /img/wave-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/wave-white.png -------------------------------------------------------------------------------- /img/wave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/img/wave.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cryptoverse 8 | 9 | 11 | 12 | 13 | 14 | 15 | 20 | 21 |
22 |
23 |

Welcome to

Cryptoverse

24 |
25 | 26 | Learn More 27 |
28 | 29 | Contact Us 30 |
31 | 32 |
33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 |
CURRENCY TRACKING
42 |

Monitoring the performance of Cryptoassets in the Market

43 |

CryptAstra, one of the main components of the Cryptoverse is used to list, track and monitor all the cryptocurrencies present in the cryptomarket and generate updated and useful insights for the user. The peformance of a cryptoasset is of the highest relevance for an investor.

44 | 45 |
46 |
47 | 48 |
49 |
50 | 51 |
52 |
53 |
NFT MARKETPLACE
54 |

Buy and Sell Non-fungible tokens, Meta-assets,Create Lands and customize goodies to be the Master of the Metaverse

55 |

CryptDarshan focuses on the observation and maintenance of the cryptoverse and is used when the user needs to rely on a secure platform to perform cryptotasks. With high security and 10-avatar features, this is one of the most attractive place of the Cryptoverse to be in.

56 | 57 |
58 | 59 |
60 | 61 | 62 |
63 |
64 | 65 |
66 |
67 |
SIMULATION
68 |

Put to work what you use

69 |

Many people have a doubt about the working of decentralized systems and have dilemmas in relying a decentralized system. For them we have brought, Cryptshul. Here, we have designed the simulator so that they can be secure that the investments and the trasactions are no eavesdropped and run almost no rist of beign misplaced.

70 | 71 |
72 | 73 |
74 | 75 | 76 | 77 |
78 |
79 | 80 |
81 |
82 |
ABOUT
83 |

Last but not the not the least, the Crymbha

84 |

Get to know about the creators of this platform so that you can contact them and pat their backs if you like or blame them if the site runs too slow. Well, we will make sure you curse us the least as the dedicated team is always working to better the UX.

85 | 86 |
87 | 88 |
89 | 90 | 91 | 92 | 93 | 94 |
95 | spaceship 96 |
97 | 98 | 125 | 126 | 131 | 132 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const sections = document.querySelectorAll("section"); 2 | const navList = document.querySelector(".navbar__list"); 3 | const navbar = document.querySelector(".navbar"); 4 | const hero = document.querySelector(".hero"); 5 | 6 | 7 | 8 | //function to populate the navbar 9 | const buildLinks = () => { 10 | for (let section of sections) { 11 | //label of the navbar link 12 | const linkName = section.getAttribute("data-nav"); 13 | //create and add the class to the navbar item node 14 | const listItem = document.createElement("LI"); 15 | listItem.classList.add("navbar__item"); 16 | const linkItem = document.createElement("A"); 17 | linkItem.classList.add("navbar__link"); 18 | linkItem.textContent = linkName; 19 | linkItem.setAttribute("href", `#${section.id}`); 20 | listItem.appendChild(linkItem); 21 | navList.appendChild(listItem); 22 | } 23 | }; 24 | 25 | //highlight active link 26 | const highLightActive = () => { 27 | //find the boundary of the active link 28 | let activeLink = document 29 | .querySelector(".active-link") 30 | .getBoundingClientRect(); 31 | //set the left position and width of the underline to the left and width of the link 32 | document.documentElement.style.setProperty( 33 | "--leftPos", 34 | `${activeLink.left}px` 35 | ); 36 | document.documentElement.style.setProperty( 37 | "--linkWidth", 38 | `${activeLink.width}px` 39 | ); 40 | }; 41 | 42 | //add class 'active' section 43 | const spyScrolling = () => { 44 | const scrollPos = document.scrollingElement.scrollTop + 1; 45 | //animate the gototop buttonn to hide while scrolling 46 | if (scrollPos >= document.body.offsetHeight / 2) { 47 | goTop.style.bottom = "3vw"; 48 | } else { 49 | goTop.style.bottom = "-5rem"; 50 | } 51 | 52 | for (let section of sections) { 53 | const id = section.id; 54 | 55 | if (scrollPos >= hero.offsetHeight) { 56 | //only begin if the user has scrolled passed the header 57 | if (section.offsetTop <= scrollPos) { 58 | if (!document.querySelector(".active")) { 59 | sections[0].classList.add("active"); 60 | document.querySelector(".navbar__item").classList.add("active-link"); 61 | } 62 | document.querySelector(".active-link").classList.remove("active-link"); 63 | document.querySelector(".active").classList.remove("active"); 64 | document 65 | .querySelector(`a[href*=${id}]`) 66 | .parentElement.classList.add("active-link"); 67 | document.querySelector(`#${id}`).classList.add("active"); 68 | highLightActive(); 69 | } 70 | } 71 | //remove all active states when the user isn't on any section 72 | else { 73 | sections[0].classList.remove("active"); 74 | document.querySelector(".navbar__item").classList.remove("active-link"); 75 | document.documentElement.style.setProperty("--leftPos", "-100vw"); 76 | } 77 | } 78 | }; 79 | 80 | let prevScrollpos = document.scrollingElement.scrollTop; 81 | let timeOut; 82 | const goTop = document.querySelector(".goTop"); 83 | const animateNavbar = () => { 84 | //adds and removes a background to the navbar on scroll 85 | let currentScrollPos = document.scrollingElement.scrollTop; 86 | if (currentScrollPos == 0) { 87 | navbar.classList.remove("navbar--dark"); 88 | } else if (prevScrollpos < currentScrollPos) { 89 | navbar.classList.add("navbar--dark"); 90 | navbar.style.top = `-${navbar.offsetHeight}px`; 91 | } else { 92 | navbar.style.top = "0"; 93 | } 94 | prevScrollpos = currentScrollPos; 95 | //if the user isn't at the top of the screen and doesn't scroll, hide the navbar after 7 seconds 96 | if (prevScrollpos > hero.offsetHeight) { 97 | timeOut = setTimeout(() => { 98 | navbar.style.top = `-${navbar.offsetHeight}px`; 99 | }, 7000); 100 | } else { 101 | clearTimeout(timeOut); 102 | } 103 | }; 104 | 105 | //add smooth scrolling behaviour 106 | const makeNavLinksSmooth = event => { 107 | event.preventDefault(); 108 | document.querySelector(event.target.hash).scrollIntoView({ 109 | behavior: "smooth" 110 | }); 111 | }; 112 | navList.addEventListener("click", makeNavLinksSmooth); 113 | 114 | //add gotoTop function 115 | goTop.addEventListener("click", () => { 116 | document.querySelector("body").scrollIntoView({ 117 | behavior: "smooth" 118 | }); 119 | }); 120 | 121 | window.addEventListener("DOMContentLoaded", () => { 122 | buildLinks(); 123 | }); 124 | 125 | //on window resize make sure the link is correctly positioned 126 | window.addEventListener("resize", () => { 127 | spyScrolling(); 128 | }); 129 | 130 | window.addEventListener("scroll", () => { 131 | animateNavbar(); 132 | spyScrolling(); 133 | }); 134 | -------------------------------------------------------------------------------- /js/header.js: -------------------------------------------------------------------------------- 1 | let scene, camera, renderer, starGeometry, stars; 2 | //absolute path to the images folder needed to load the textures 3 | const imagePath = window.location.protocol + "//" + window.location.host + "/"; 4 | 5 | function init() { 6 | //initialise the scene 7 | scene = new THREE.Scene(); 8 | //use a perspective camera and set aspect ratio to match the aspect ratio of the viewport 9 | camera = new THREE.PerspectiveCamera( 10 | 60, 11 | window.innerWidth / window.innerHeight, 12 | 1, 13 | 1000 14 | ); 15 | camera.position.z = 1; 16 | camera.rotation.x = Math.PI / 2; 17 | 18 | //initialise renderer and set background to transparent 19 | renderer = new THREE.WebGLRenderer({ 20 | alpha: true 21 | }); 22 | renderer.setClearColor(0x000000, 0); 23 | //set the size of the renderer to the size of the viewport 24 | renderer.setSize(window.innerWidth, window.innerHeight); 25 | //add renderer to the document body 26 | document.body.appendChild(renderer.domElement); 27 | 28 | //create a star geometry using sprites 29 | starGeometry = new THREE.Geometry(); 30 | for (i = 0; i < 6000; i++) { 31 | star = new THREE.Vector3( 32 | Math.random() * 600 - 300, 33 | Math.random() * 600 - 300, 34 | Math.random() * 600 - 300 35 | ); 36 | star.velocity = 0; 37 | star.acceleration = 0.02; 38 | starGeometry.vertices.push(star); 39 | } 40 | let sprite = new THREE.TextureLoader().load(`${imagePath}img/star.png`); 41 | let starMaterial = new THREE.PointsMaterial({ 42 | color: 0xaaaaaa, 43 | size: 1, 44 | map: sprite 45 | }); 46 | 47 | stars = new THREE.Points(starGeometry, starMaterial); 48 | 49 | //add stars to the scene 50 | scene.add(stars); 51 | //listen for window resize to update aspect ratio 52 | window.addEventListener("resize", onWindowResize, false); 53 | 54 | animate(); 55 | } 56 | 57 | function onWindowResize() { 58 | camera.aspect = window.innerWidth / window.innerHeight; 59 | camera.updateProjectionMatrix(); 60 | renderer.setSize(window.innerWidth, window.innerHeight); 61 | } 62 | 63 | function animate() { 64 | //loop through the stars and update the velocity and the position 65 | starGeometry.vertices.forEach(star => { 66 | star.velocity += star.acceleration; 67 | star.y -= star.velocity; 68 | //if star falls behind the screen reset position and velocity 69 | if (star.y < -200) { 70 | star.velocity = 0; 71 | star.y = 200; 72 | } 73 | }); 74 | //inform ThreeJS to monitor the state of our stars and update them if need be 75 | starGeometry.verticesNeedUpdate = true; 76 | //add rotation to the stars 77 | stars.rotation.y += 0.002; 78 | 79 | renderer.render(scene, camera); 80 | requestAnimationFrame(animate); 81 | } 82 | 83 | document.addEventListener("DOMContentLoaded", () => { 84 | init(); 85 | }); 86 | -------------------------------------------------------------------------------- /js/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakRepositor/CryptoVerse/eb690dcaa2710a03a6e3bb322bd62654244083fa/js/star.png --------------------------------------------------------------------------------