├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── about-banner.png │ ├── app-banner.png │ ├── appstore.png │ ├── chart-1.svg │ ├── chart-2.svg │ ├── coin-1.svg │ ├── coin-2.svg │ ├── coin-3.svg │ ├── coin-4.svg │ ├── coin-5.svg │ ├── coin-6.svg │ ├── coin-7.svg │ ├── coin-8.svg │ ├── connect-line.png │ ├── googleplay.png │ ├── hero-banner.png │ ├── instruction-1.png │ ├── instruction-2.png │ ├── instruction-3.png │ ├── instruction-4.png │ └── logo.svg └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images └── desktop.png └── style-guide.md /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/cryptex) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/cryptex?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/cryptex?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 7 | [![YouTube Video Views](https://img.shields.io/youtube/views/ux3o7jDhvOc?style=social)](https://youtu.be/ux3o7jDhvOc) 8 | 9 |
10 |
11 | 12 |

Cryptex - Cryptocurrency Website

13 | 14 | Cryptex is a fully responsive cryptocurrency website,
Responsive for all devices, build using HTML, CSS, and JavaScript. 15 | 16 | ➥ Live Demo 17 | 18 |
19 | 20 |
21 | 22 | ### Demo Screeshots 23 | 24 | ![Cryptex Desktop Demo](./readme-images/desktop.png "Desktop Demo") 25 | 26 | ### Prerequisites 27 | 28 | Before you begin, ensure you have met the following requirements: 29 | 30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 31 | 32 | ### Run Locally 33 | 34 | To run **Cryptex** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/cryptex.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/cryptex.git 46 | ``` 47 | 48 | ### Contact 49 | 50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 51 | 52 | ### License 53 | 54 | This project is **free to use** and does not contains any license. 55 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyrights 2022 codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --cadet-blue-crayola: hsl(227, 13%, 73%); 24 | --maximum-yellow-red: hsl(41, 95%, 61%); 25 | --medium-sea-green: hsl(142, 43%, 54%); 26 | --blue-crayola_10: hsla(222, 100%, 61%, 0.05); 27 | --smocky-black_30: hsla(0, 0%, 6%, 0.3); 28 | --eerie-black-1: hsl(240, 5%, 8%); 29 | --eerie-black-2: hsl(228, 9%, 10%); 30 | --raisin-black: hsl(225, 15%, 16%); 31 | --blue-crayola: hsl(222, 100%, 61%); 32 | --roman-silver: hsl(223, 10%, 52%); 33 | --presian-red: hsl(0, 64%, 52%); 34 | --gunmetal_50: hsla(230, 16%, 22%, 0.5); 35 | --gainsboro: hsl(0, 0%, 85%); 36 | --cultured: hsl(0, 0%, 93%); 37 | --white_50: hsla(0, 0%, 100%, 0.5); 38 | --white_30: hsla(0, 0%, 100%, 0.3); 39 | --white_10: hsla(0, 0%, 100%, 0.1); 40 | --black_10: hsla(0, 0%, 0%, 0.1); 41 | --white: hsl(0, 0%, 100%); 42 | 43 | /** 44 | * gradient color 45 | */ 46 | 47 | --gradient: linear-gradient(90deg, var(--white_10) 0px 77%, var(--white_50) 92%, transparent); 48 | 49 | /** 50 | * typography 51 | */ 52 | 53 | --ff-dm-sans: 'DM Sans', sans-serif; 54 | 55 | --fs-1: 3.2rem; 56 | --fs-2: 3rem; 57 | --fs-3: 2.4rem; 58 | --fs-4: 2rem; 59 | --fs-5: 1.8rem; 60 | --fs-6: 1.5rem; 61 | --fs-7: 1.4rem; 62 | --fs-8: 1.2rem; 63 | 64 | --fw-500: 500; 65 | --fw-700: 700; 66 | 67 | /** 68 | * spacing 69 | */ 70 | 71 | --section-padding: 100px; 72 | 73 | /** 74 | * shadow 75 | */ 76 | 77 | --shadow-1: 0px 4px 8px var(--black_10); 78 | --shadow-2: 0px 30px 10px -20px var(--smocky-black_30); 79 | --shadow-3: 0px 15px 10px -20px var(--smocky-black_30); 80 | 81 | /** 82 | * radius 83 | */ 84 | 85 | --radius-12: 12px; 86 | --radius-24: 24px; 87 | 88 | /** 89 | * transition 90 | */ 91 | 92 | --transition-1: 0.25s ease; 93 | --transition-2: 0.5s ease; 94 | --transition-3: 1s ease; 95 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 96 | 97 | } 98 | 99 | 100 | 101 | 102 | 103 | /*-----------------------------------*\ 104 | #RESET 105 | \*-----------------------------------*/ 106 | 107 | *, 108 | *::before, 109 | *::after { 110 | margin: 0; 111 | padding: 0; 112 | box-sizing: border-box; 113 | } 114 | 115 | li { list-style: none; } 116 | 117 | a { 118 | text-decoration: none; 119 | color: inherit; 120 | } 121 | 122 | a, 123 | img, 124 | svg, 125 | data, 126 | span, 127 | button, 128 | ion-icon { display: block; } 129 | 130 | img { height: auto; } 131 | 132 | button { 133 | background: none; 134 | border: none; 135 | font: inherit; 136 | cursor: pointer; 137 | } 138 | 139 | ion-icon { pointer-events: none; } 140 | 141 | address { font-style: normal; } 142 | 143 | table { border-collapse: collapse; } 144 | 145 | html { 146 | font-family: var(--ff-dm-sans); 147 | font-size: 10px; 148 | scroll-behavior: smooth; 149 | } 150 | 151 | body { 152 | background-color: var(--eerie-black-2); 153 | color: var(--cadet-blue-crayola); 154 | font-size: 1.6rem; 155 | line-height: 1.4; 156 | } 157 | 158 | body.active { overflow: hidden; } 159 | 160 | ::-webkit-scrollbar { width: 10px; } 161 | 162 | ::-webkit-scrollbar-track { background-color: hsl(220, 4%, 5%); } 163 | 164 | ::-webkit-scrollbar-thumb { background-color: hsl(220, 5%, 20%); } 165 | 166 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(220, 5%, 30%); } 167 | 168 | :focus-visible { outline-offset: 4px; } 169 | 170 | 171 | 172 | 173 | 174 | /*-----------------------------------*\ 175 | #REUSED STYLE 176 | \*-----------------------------------*/ 177 | 178 | .container { padding-inline: 15px; } 179 | 180 | .btn { 181 | color: var(--white); 182 | border-radius: 50px; 183 | } 184 | 185 | .btn-outline { 186 | font-size: var(--fs-6); 187 | font-weight: var(--fw-500); 188 | border: 1px solid var(--white); 189 | padding: 5px 15px; 190 | transition: var(--transition-1); 191 | } 192 | 193 | .btn-outline:is(:hover, :focus) { 194 | background-color: var(--blue-crayola); 195 | border-color: var(--blue-crayola); 196 | } 197 | 198 | .btn-primary { 199 | position: relative; 200 | background-color: var(--blue-crayola); 201 | max-width: max-content; 202 | font-weight: var(--fw-700); 203 | padding: 13px 30px; 204 | overflow: hidden; 205 | z-index: 1; 206 | } 207 | 208 | .btn-primary::after { 209 | content: ""; 210 | position: absolute; 211 | top: 0; 212 | left: 0; 213 | bottom: 0; 214 | right: -50px; 215 | background-image: var(--gradient); 216 | transform: translateX(-100%); 217 | opacity: 0; 218 | z-index: -1; 219 | transition: var(--transition-2); 220 | } 221 | 222 | .btn-primary:is(:hover, :focus)::after { 223 | transform: translateX(0); 224 | opacity: 1; 225 | } 226 | 227 | .section { padding-block: var(--section-padding); } 228 | 229 | [data-section] > * { 230 | transform: translateY(50px); 231 | opacity: 0; 232 | transition: var(--transition-3); 233 | } 234 | 235 | [data-section].active > * { 236 | opacity: 1; 237 | transform: translateY(0); 238 | } 239 | 240 | .h1, 241 | .h2, 242 | .h3 { 243 | color: var(--white); 244 | line-height: 1.1; 245 | } 246 | 247 | .h1 { font-size: var(--fs-1); } 248 | 249 | .h2 { font-size: var(--fs-2); } 250 | 251 | .h3 { font-size: var(--fs-3); } 252 | 253 | .w-100 { width: 100%; } 254 | 255 | .badge { 256 | color: var(--white); 257 | font-size: var(--fs-8); 258 | font-weight: var(--fw-700); 259 | padding: 4px 8px; 260 | border-radius: 50px; 261 | } 262 | 263 | .badge.red { background-color: var(--presian-red); } 264 | 265 | .badge.green { background-color: var(--medium-sea-green); } 266 | 267 | .last-update.red { color: var(--presian-red); } 268 | 269 | .last-update.green { color: var(--medium-sea-green); } 270 | 271 | .section-text { 272 | font-size: var(--fs-5); 273 | margin-block: 15px 35px; 274 | } 275 | 276 | .section-list { margin-block-end: 35px; } 277 | 278 | .section-item:not(:last-child) { margin-block-end: 25px; } 279 | 280 | .section-item .title-wrapper { 281 | display: flex; 282 | align-items: center; 283 | gap: 10px; 284 | margin-block-end: 15px; 285 | } 286 | 287 | .section-item .title-wrapper ion-icon { 288 | flex-shrink: 0; 289 | color: var(--blue-crayola); 290 | font-size: 24px; 291 | } 292 | 293 | 294 | 295 | 296 | 297 | /*-----------------------------------*\ 298 | #HEADER 299 | \*-----------------------------------*/ 300 | 301 | .header { 302 | position: absolute; 303 | top: 0; 304 | left: 0; 305 | width: 100%; 306 | background-color: var(--eerie-black-1); 307 | padding-block: 15px; 308 | z-index: 4; 309 | } 310 | 311 | .header.active { 312 | position: fixed; 313 | top: -66px; 314 | background-color: var(--white); 315 | border-block-start: 1px solid var(--cultured); 316 | box-shadow: var(--shadow-1); 317 | animation: slideIn 0.25s var(--cubic-out) forwards; 318 | } 319 | 320 | @keyframes slideIn { 321 | 322 | 0% { 323 | transform: translateY(0); 324 | background-color: var(--white); 325 | } 326 | 327 | 100% { 328 | transform: translateY(100%); 329 | background-color: var(--eerie-black-2); 330 | } 331 | 332 | } 333 | 334 | .header > .container { 335 | display: flex; 336 | justify-content: space-between; 337 | align-items: center; 338 | gap: 10px; 339 | } 340 | 341 | .logo { 342 | color: var(--white); 343 | font-size: 2.5rem; 344 | font-weight: var(--fw-700); 345 | display: flex; 346 | align-items: center; 347 | gap: 5px; 348 | } 349 | 350 | .nav-toggle-btn .line { 351 | width: 26px; 352 | height: 3px; 353 | background-color: var(--white); 354 | transition: var(--transition-1); 355 | } 356 | 357 | .nav-toggle-btn .line:not(:last-child) { margin-block-end: 4px; } 358 | 359 | .nav-toggle-btn { 360 | padding: 8px 5px; 361 | margin-inline-start: auto; 362 | } 363 | 364 | .nav-toggle-btn.active .line-1 { transform: rotate(45deg) translate(5px, 6px); } 365 | 366 | .nav-toggle-btn.active .line-2 { opacity: 0; } 367 | 368 | .nav-toggle-btn.active .line-3 { transform: rotate(-45deg) translate(4px, -5px); } 369 | 370 | .navbar { 371 | position: absolute; 372 | top: 100%; 373 | left: 0; 374 | width: 100%; 375 | height: 100vh; 376 | background-color: var(--eerie-black-1); 377 | max-height: 0; 378 | overflow: hidden; 379 | visibility: hidden; 380 | transition: 0.25s var(--cubic-out); 381 | } 382 | 383 | .navbar.active { 384 | max-height: calc(100vh - 63px); 385 | visibility: visible; 386 | transition-duration: 0.5s; 387 | } 388 | 389 | .navbar-item:not(:last-child) { border-block-end: 1px solid var(--white_30); } 390 | 391 | .navbar-link { 392 | color: var(--white); 393 | font-weight: var(--fw-700); 394 | padding: 12px 30px; 395 | transition: var(--transition-1); 396 | } 397 | 398 | .navbar-link:is(:hover, :focus, .active) { color: var(--blue-crayola); } 399 | 400 | 401 | 402 | 403 | 404 | /*-----------------------------------*\ 405 | #HERO 406 | \*-----------------------------------*/ 407 | 408 | .hero { padding-block: 150px 140px; } 409 | 410 | .hero-content { margin-block-end: 80px; } 411 | 412 | .hero-text { 413 | font-size: var(--fs-5); 414 | margin-block: 25px 40px; 415 | } 416 | 417 | 418 | 419 | 420 | 421 | /*-----------------------------------*\ 422 | #TREND 423 | \*-----------------------------------*/ 424 | 425 | .trend { 426 | background-color: var(--eerie-black-1); 427 | padding-block-end: 0; 428 | } 429 | 430 | .trend-tab { 431 | background-color: var(--eerie-black-2); 432 | border: 1px solid var(--raisin-black); 433 | border-radius: var(--radius-24); 434 | padding: 20px; 435 | box-shadow: var(--shadow-2); 436 | margin-block-start: -160px; 437 | } 438 | 439 | .trend-tab .tab-nav { 440 | display: flex; 441 | flex-wrap: wrap; 442 | padding-block-end: 20px; 443 | margin-block-end: 20px; 444 | border-block-end: 1px solid var(--raisin-black); 445 | } 446 | 447 | .trend-tab .tab-btn { 448 | color: var(--white); 449 | font-size: var(--fs-7); 450 | font-weight: var(--fw-700); 451 | padding: 7px 15px; 452 | border-radius: 50px; 453 | transition: var(--transition-1); 454 | } 455 | 456 | .trend-tab .tab-btn.active { background-color: var(--blue-crayola); } 457 | 458 | .trend-tab .tab-content { 459 | display: grid; 460 | gap: 20px; 461 | } 462 | 463 | .trend-card { 464 | padding: 20px; 465 | border-radius: var(--radius-12); 466 | transition: var(--transition-1); 467 | } 468 | 469 | .trend-card:is(:hover, .active) { 470 | background-color: var(--gunmetal_50); 471 | box-shadow: var(--shadow-3); 472 | } 473 | 474 | .trend-card .card-title-wrapper { 475 | display: flex; 476 | align-items: center; 477 | gap: 8px; 478 | } 479 | 480 | .trend-card .card-title { 481 | color: var(--white); 482 | font-size: var(--fs-7); 483 | font-weight: var(--fw-700); 484 | transition: var(--transition-1); 485 | } 486 | 487 | .trend-card .card-title:is(:hover, :focus) { color: var(--blue-crayola); } 488 | 489 | .trend-card .card-title .span { 490 | color: var(--cadet-blue-crayola); 491 | display: inline-block; 492 | margin-inline-start: 5px; 493 | } 494 | 495 | .trend-card .card-value { 496 | color: var(--white); 497 | font-size: var(--fs-3); 498 | font-weight: var(--fw-700); 499 | margin-block: 10px; 500 | } 501 | 502 | .trend-card .card-analytics { 503 | display: flex; 504 | align-items: center; 505 | gap: 8px; 506 | } 507 | 508 | .trend-card .current-price { font-size: var(--fs-7); } 509 | 510 | 511 | 512 | 513 | 514 | /*-----------------------------------*\ 515 | #MARKET 516 | \*-----------------------------------*/ 517 | 518 | .market { 519 | background-color: var(--eerie-black-1); 520 | color: var(--white); 521 | } 522 | 523 | .market .title-wrapper { 524 | display: flex; 525 | justify-content: space-between; 526 | align-items: center; 527 | gap: 20px; 528 | margin-block-end: 25px; 529 | } 530 | 531 | .market .btn-link { 532 | position: relative; 533 | min-width: max-content; 534 | font-weight: var(--fw-700); 535 | transition: var(--transition-1); 536 | } 537 | 538 | .market .btn-link:is(:hover, :focus) { color: var(--blue-crayola); } 539 | 540 | .market .btn-link::after { 541 | content: ""; 542 | position: absolute; 543 | bottom: 0; 544 | left: 0; 545 | width: 100%; 546 | height: 2px; 547 | background-color: var(--raisin-black); 548 | transition: var(--transition-1); 549 | } 550 | 551 | .market .btn-link:is(:hover, :focus)::after { background-color: var(--blue-crayola); } 552 | 553 | .market-tab { 554 | overflow-x: auto; 555 | padding-block-end: 30px; 556 | } 557 | 558 | .market-tab::-webkit-scrollbar { height: 14px; } 559 | 560 | .market-tab::-webkit-scrollbar-thumb { 561 | border: 2px solid hsl(220, 4%, 5%); 562 | border-width: 2px 10px; 563 | } 564 | 565 | .market-tab .tab-nav { 566 | display: flex; 567 | align-items: center; 568 | gap: 10px; 569 | padding-block-end: 40px; 570 | } 571 | 572 | .market-tab .tab-btn { 573 | min-width: max-content; 574 | color: var(--white); 575 | font-size: var(--fs-7); 576 | font-weight: var(--fw-700); 577 | padding: 7px 24px; 578 | border-radius: 50px; 579 | } 580 | 581 | .market-tab .tab-btn.active { background-color: var(--blue-crayola); } 582 | 583 | .market-table { width: 100%; } 584 | 585 | .table-heading, 586 | .table-data { padding: 8px; } 587 | 588 | .table-heading { 589 | font-size: var(--fs-5); 590 | text-align: left; 591 | white-space: nowrap; 592 | } 593 | 594 | .market-table .table-head { border-block-end: 2px solid var(--white); } 595 | 596 | .table-row:not(.table-title) { height: 90px; } 597 | 598 | .market-table .table-row { 599 | font-size: var(--fs-5); 600 | border-block-end: 1px solid var(--raisin-black); 601 | transition: var(--transition-1); 602 | } 603 | 604 | .market-table .table-body .table-row:is(:hover, :focus-within) { 605 | background-color: var(--blue-crayola_10); 606 | } 607 | 608 | .market-table .add-to-fav { 609 | color: var(--cadet-blue-crayola); 610 | font-size: 18px; 611 | } 612 | 613 | .market-table .add-to-fav.active .icon-outline, 614 | .market-table .add-to-fav .icon-fill { display: none; } 615 | 616 | .market-table .add-to-fav .icon-outline, 617 | .market-table .add-to-fav.active .icon-fill { display: block; } 618 | 619 | .market-table .add-to-fav.active ion-icon { color: var(--maximum-yellow-red); } 620 | 621 | .market-table .wrapper { 622 | display: flex; 623 | align-items: center; 624 | gap: 8px; 625 | min-width: max-content; 626 | } 627 | 628 | .market-table .coin-name { 629 | font-size: var(--fs-5); 630 | display: flex; 631 | align-items: center; 632 | gap: 10px; 633 | transition: var(--transition-1); 634 | } 635 | 636 | .market-table .coin-name .span { 637 | color: var(--roman-silver); 638 | font-size: var(--fs-7); 639 | } 640 | 641 | .market-table .coin-name:is(:hover, :focus) { color: var(--blue-crayola); } 642 | 643 | .market-table :is(.rank, .last-price, .market-cap) { font-weight: var(--fw-700); } 644 | 645 | .market-table .btn-outline { 646 | border-width: 2px; 647 | padding-inline: 10px; 648 | } 649 | 650 | .market-table .table-row:is(:hover, :focus-within) .btn-outline { 651 | background-color: var(--blue-crayola); 652 | border-color: var(--blue-crayola); 653 | } 654 | 655 | 656 | 657 | 658 | 659 | /*-----------------------------------*\ 660 | #INSTRUCTION 661 | \*-----------------------------------*/ 662 | 663 | .instruction :is(.section-title, .section-text) { text-align: center; } 664 | 665 | .instruction .section-title { margin-block-end: 15px; } 666 | 667 | .instruction-list { 668 | display: grid; 669 | gap: 30px; 670 | margin-block-start: 50px; 671 | } 672 | 673 | .instruction-card { text-align: center; } 674 | 675 | .instruction-card .card-banner { transition: var(--transition-2); } 676 | 677 | .instruction-card:hover .card-banner { transform: rotateY(1turn); } 678 | 679 | .instruction-card .img { 680 | margin-inline: auto; 681 | margin-block-end: 12px; 682 | } 683 | 684 | .instruction-card .card-subtitle { 685 | font-size: var(--fs-8); 686 | font-weight: var(--fw-700); 687 | text-transform: uppercase; 688 | } 689 | 690 | .instruction-card .card-title { 691 | font-size: var(--fs-4); 692 | margin-block: 5px 15px; 693 | } 694 | 695 | .instruction-card .card-text { padding-inline: 20px; } 696 | 697 | 698 | 699 | 700 | 701 | /*-----------------------------------*\ 702 | #ABOUT 703 | \*-----------------------------------*/ 704 | 705 | .about { background-color: var(--eerie-black-1); } 706 | 707 | .about-banner { margin-block-end: 40px; } 708 | 709 | 710 | 711 | 712 | 713 | /*-----------------------------------*\ 714 | #APP 715 | \*-----------------------------------*/ 716 | 717 | .app { 718 | overflow: hidden; 719 | padding-block-end: 0; 720 | } 721 | 722 | .app-wrapper { 723 | display: flex; 724 | flex-wrap: wrap; 725 | align-items: center; 726 | gap: 15px; 727 | } 728 | 729 | .app-banner { 730 | position: relative; 731 | margin-block-start: 60px; 732 | } 733 | 734 | .app-banner .span { 735 | position: absolute; 736 | top: 10%; 737 | left: 0; 738 | color: var(--white); 739 | font-size: var(--fs-7); 740 | font-weight: var(--fw-700); 741 | padding: 8px 15px; 742 | border: 2px solid var(--white); 743 | border-radius: 50px; 744 | } 745 | 746 | 747 | 748 | 749 | 750 | /*-----------------------------------*\ 751 | #FOOTER 752 | \*-----------------------------------*/ 753 | 754 | .footer-top { 755 | background-color: var(--eerie-black-1); 756 | padding-block: 80px 50px; 757 | } 758 | 759 | .footer-top .container { 760 | display: grid; 761 | gap: 50px; 762 | } 763 | 764 | .footer .logo { font-size: 3rem; } 765 | 766 | .footer-title { 767 | color: var(--white); 768 | font-size: var(--fs-3); 769 | margin-block: 25px 20px; 770 | } 771 | 772 | .footer-contact-link:not(:last-child) { margin-block-end: 12px; } 773 | 774 | address.footer-contact-link { max-width: 30ch; } 775 | 776 | .footer-list-title { 777 | color: var(--white); 778 | font-size: var(--fs-7); 779 | font-weight: var(--fw-700); 780 | text-transform: uppercase; 781 | letter-spacing: 1px; 782 | } 783 | 784 | .footer-list > li:not(:last-child) { margin-block-end: 10px; } 785 | 786 | .footer-list > li:first-child { margin-block-end: 20px; } 787 | 788 | .footer-link { 789 | color: var(--gainsboro); 790 | transition: var(--transition-1); 791 | } 792 | 793 | .footer-link:is(:hover, :focus) { color: var(--blue-crayola); } 794 | 795 | .footer-bottom { 796 | background-color: var(--eerie-black-2); 797 | padding-block: 20px; 798 | } 799 | 800 | .copyright { 801 | text-align: center; 802 | margin-block-end: 20px; 803 | } 804 | 805 | .copyright-link { 806 | display: inline-block; 807 | color: var(--blue-crayola); 808 | } 809 | 810 | .social-list { 811 | display: flex; 812 | justify-content: center; 813 | gap: 20px; 814 | } 815 | 816 | .social-link { 817 | font-size: 18px; 818 | transition: var(--transition-1); 819 | } 820 | 821 | .social-link:is(:hover, :focus) { color: var(--blue-crayola); } 822 | 823 | 824 | 825 | 826 | 827 | /*-----------------------------------*\ 828 | #MEDIA QUERIES 829 | \*-----------------------------------*/ 830 | 831 | /** 832 | * responsive for larger than 575px screen 833 | */ 834 | 835 | @media (min-width: 575px) { 836 | 837 | /** 838 | * CUSTOM PROPERTY 839 | */ 840 | 841 | :root { 842 | 843 | /** 844 | * typography 845 | */ 846 | 847 | --fs-1: 4rem; 848 | --fs-2: 3.4rem; 849 | 850 | } 851 | 852 | 853 | 854 | /** 855 | * REUSED STYLE 856 | */ 857 | 858 | .container { 859 | max-width: 540px; 860 | width: 100%; 861 | margin-inline: auto; 862 | } 863 | 864 | 865 | 866 | /** 867 | * HERO 868 | */ 869 | 870 | .hero-text { --fs-5: 2rem; } 871 | 872 | } 873 | 874 | 875 | 876 | 877 | 878 | /** 879 | * responsive for larger than 768px screen 880 | */ 881 | 882 | @media (min-width: 768px) { 883 | 884 | /** 885 | * CUSTOM PROPERTY 886 | */ 887 | 888 | :root { 889 | 890 | /** 891 | * typography 892 | */ 893 | 894 | --fs-1: 5rem; 895 | --fs-2: 4rem; 896 | 897 | } 898 | 899 | 900 | 901 | /** 902 | * REUSED STYLE 903 | */ 904 | 905 | .container { max-width: 750px; } 906 | 907 | 908 | 909 | /** 910 | * HERO 911 | */ 912 | 913 | .hero-banner { 914 | max-width: max-content; 915 | margin-inline: auto; 916 | } 917 | 918 | 919 | 920 | /** 921 | * TREND 922 | */ 923 | 924 | .trend-tab .tab-content { grid-template-columns: 1fr 1fr; } 925 | 926 | 927 | 928 | /** 929 | * INSTRUCTION 930 | */ 931 | 932 | .instruction { overflow: hidden; } 933 | 934 | .instruction .section-text { 935 | max-width: 40ch; 936 | margin-inline: auto; 937 | } 938 | 939 | .instruction-list { grid-template-columns: 1fr 1fr; } 940 | 941 | .instruction-card { position: relative; } 942 | 943 | .instruction-card::after { 944 | content: ""; 945 | width: 160px; 946 | height: 12px; 947 | background-image: url('../images/connect-line.png'); 948 | background-repeat: no-repeat; 949 | background-size: contain; 950 | background-position: center; 951 | position: absolute; 952 | top: 50px; 953 | right: -95px; 954 | } 955 | 956 | .instruction-list > li:nth-child(even) .instruction-card::after { 957 | display: none; 958 | } 959 | 960 | 961 | 962 | /** 963 | * APP 964 | */ 965 | 966 | .app-banner { max-width: max-content; } 967 | 968 | 969 | 970 | /** 971 | * FOOTER 972 | */ 973 | 974 | .footer-top .container { grid-template-columns: repeat(3, 1fr); } 975 | 976 | .footer-brand { grid-column: 1 / 3; } 977 | 978 | .footer-bottom .container { 979 | display: flex; 980 | justify-content: space-between; 981 | align-items: center; 982 | } 983 | 984 | .copyright { margin-block-end: 0; } 985 | 986 | } 987 | 988 | 989 | 990 | 991 | 992 | /** 993 | * responsive for larger than 992px screen 994 | */ 995 | 996 | @media (min-width: 992px) { 997 | 998 | /** 999 | * REUSED STYLE 1000 | */ 1001 | 1002 | .container { max-width: 960px; } 1003 | 1004 | 1005 | 1006 | /** 1007 | * HEADER 1008 | */ 1009 | 1010 | .header { padding-block: 5px; } 1011 | 1012 | .header.active { top: -60px; } 1013 | 1014 | .header > .container { gap: 50px; } 1015 | 1016 | .nav-toggle-btn { display: none; } 1017 | 1018 | .navbar, 1019 | .navbar.active { 1020 | all: unset; 1021 | margin-inline-end: auto; 1022 | } 1023 | 1024 | .navbar-list { 1025 | display: flex; 1026 | align-items: center; 1027 | } 1028 | 1029 | .navbar-item:not(:last-child) { border-block-end: none; } 1030 | 1031 | .navbar-link { 1032 | font-size: var(--fs-7); 1033 | padding: 15px 12px; 1034 | } 1035 | 1036 | .navbar-link:is(:hover, :focus, .active) { 1037 | background-color: var(--blue-crayola); 1038 | color: var(--white); 1039 | } 1040 | 1041 | 1042 | 1043 | /** 1044 | * HERO 1045 | */ 1046 | 1047 | .hero .container { 1048 | display: grid; 1049 | grid-template-columns: 1fr 1fr; 1050 | align-items: center; 1051 | gap: 30px; 1052 | } 1053 | 1054 | .hero-content { margin-block-end: 0; } 1055 | 1056 | 1057 | 1058 | /** 1059 | * MARKET 1060 | */ 1061 | 1062 | .market-tab { padding-block-end: 0; } 1063 | 1064 | 1065 | 1066 | /** 1067 | * ABOUT 1068 | */ 1069 | 1070 | .about .container { 1071 | display: grid; 1072 | grid-template-columns: 1fr 0.8fr; 1073 | align-items: center; 1074 | gap: 30px; 1075 | } 1076 | 1077 | .about-banner { margin-block-end: 0; } 1078 | 1079 | 1080 | 1081 | /** 1082 | * APP 1083 | */ 1084 | 1085 | .app { padding-block: 0; } 1086 | 1087 | .app .container { 1088 | display: grid; 1089 | grid-template-columns: 0.8fr 1fr; 1090 | align-items: flex-end; 1091 | gap: 30px; 1092 | } 1093 | 1094 | .app-banner { margin-block-start: 0; } 1095 | 1096 | .app-content { margin-block: 50px; } 1097 | 1098 | } 1099 | 1100 | 1101 | 1102 | 1103 | 1104 | /** 1105 | * responsive for larger than 1200px screen 1106 | */ 1107 | 1108 | @media (min-width: 1200px) { 1109 | 1110 | /** 1111 | * CUSTOM PROPERTY 1112 | */ 1113 | 1114 | :root { 1115 | 1116 | /** 1117 | * typography 1118 | */ 1119 | 1120 | --fs-1: 6.4rem; 1121 | --fs-2: 4.8rem; 1122 | 1123 | } 1124 | 1125 | 1126 | 1127 | /** 1128 | * REUSED STYLE 1129 | */ 1130 | 1131 | .container { max-width: 1280px; } 1132 | 1133 | 1134 | 1135 | /** 1136 | * HEADER 1137 | */ 1138 | 1139 | .header.active { top: -64px; } 1140 | 1141 | .navbar-link { font-size: unset; } 1142 | 1143 | 1144 | 1145 | /** 1146 | * HERO 1147 | */ 1148 | 1149 | .hero .container { gap: 100px; } 1150 | 1151 | 1152 | 1153 | /** 1154 | * TREND 1155 | */ 1156 | 1157 | .trend-tab .tab-content { grid-template-columns: repeat(4, 1fr); } 1158 | 1159 | 1160 | 1161 | /** 1162 | * INSTRUCTION 1163 | */ 1164 | 1165 | .instruction-list { grid-template-columns: repeat(4, 1fr); } 1166 | 1167 | .instruction-list > li:nth-child(even) .instruction-card::after { 1168 | display: block; 1169 | } 1170 | 1171 | .instruction-list > li:last-child .instruction-card::after { 1172 | display: none; 1173 | } 1174 | 1175 | 1176 | 1177 | /** 1178 | * ABOUT, APP 1179 | */ 1180 | 1181 | :is(.about, .app) .container { gap: 60px; } 1182 | 1183 | 1184 | 1185 | /** 1186 | * APP 1187 | */ 1188 | 1189 | .app-content { margin-block: 100px; } 1190 | 1191 | 1192 | 1193 | /** 1194 | * FOOTER 1195 | */ 1196 | 1197 | .footer-top { padding-block: 100px 90px; } 1198 | 1199 | .footer-top .container { grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr 0.5fr; } 1200 | 1201 | .footer-brand { grid-column: auto; } 1202 | 1203 | } -------------------------------------------------------------------------------- /assets/images/about-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/about-banner.png -------------------------------------------------------------------------------- /assets/images/app-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/app-banner.png -------------------------------------------------------------------------------- /assets/images/appstore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/appstore.png -------------------------------------------------------------------------------- /assets/images/chart-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/chart-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/coin-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/coin-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/images/coin-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/coin-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/images/coin-5.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /assets/images/coin-6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/coin-7.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /assets/images/coin-8.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/connect-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/connect-line.png -------------------------------------------------------------------------------- /assets/images/googleplay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/googleplay.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/instruction-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/instruction-1.png -------------------------------------------------------------------------------- /assets/images/instruction-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/instruction-2.png -------------------------------------------------------------------------------- /assets/images/instruction-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/instruction-3.png -------------------------------------------------------------------------------- /assets/images/instruction-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/assets/images/instruction-4.png -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * add event on element 7 | */ 8 | 9 | const addEventOnElem = function (elem, type, callback) { 10 | if (elem.length > 1) { 11 | for (let i = 0; i < elem.length; i++) { 12 | elem[i].addEventListener(type, callback); 13 | } 14 | } else { 15 | elem.addEventListener(type, callback); 16 | } 17 | } 18 | 19 | 20 | 21 | /** 22 | * navbar toggle 23 | */ 24 | 25 | const navbar = document.querySelector("[data-navbar]"); 26 | const navbarLinks = document.querySelectorAll("[data-nav-link]"); 27 | const navToggler = document.querySelector("[data-nav-toggler]"); 28 | 29 | const toggleNavbar = function () { 30 | navbar.classList.toggle("active"); 31 | navToggler.classList.toggle("active"); 32 | document.body.classList.toggle("active"); 33 | } 34 | 35 | addEventOnElem(navToggler, "click", toggleNavbar); 36 | 37 | const closeNavbar = function () { 38 | navbar.classList.remove("active"); 39 | navToggler.classList.remove("active"); 40 | document.body.classList.remove("active"); 41 | } 42 | 43 | addEventOnElem(navbarLinks, "click", closeNavbar); 44 | 45 | 46 | 47 | /** 48 | * header active 49 | */ 50 | 51 | const header = document.querySelector("[data-header]"); 52 | 53 | const activeHeader = function () { 54 | if (window.scrollY > 300) { 55 | header.classList.add("active"); 56 | } else { 57 | header.classList.remove("active"); 58 | } 59 | } 60 | 61 | addEventOnElem(window, "scroll", activeHeader); 62 | 63 | 64 | 65 | /** 66 | * toggle active on add to fav 67 | */ 68 | 69 | const addToFavBtns = document.querySelectorAll("[data-add-to-fav]"); 70 | 71 | const toggleActive = function () { 72 | this.classList.toggle("active"); 73 | } 74 | 75 | addEventOnElem(addToFavBtns, "click", toggleActive); 76 | 77 | 78 | 79 | /** 80 | * scroll revreal effect 81 | */ 82 | 83 | const sections = document.querySelectorAll("[data-section]"); 84 | 85 | const scrollReveal = function () { 86 | for (let i = 0; i < sections.length; i++) { 87 | if (sections[i].getBoundingClientRect().top < window.innerHeight / 1.5) { 88 | sections[i].classList.add("active"); 89 | } else { 90 | sections[i].classList.remove("active"); 91 | } 92 | } 93 | } 94 | 95 | scrollReveal(); 96 | 97 | addEventOnElem(window, "scroll", scrollReveal); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cryptex - Buy & Sell Digital Assets In The cryptex 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 33 | 34 |
35 |
36 | 37 | 41 | 42 | 71 | 72 | 77 | 78 | Wallet 79 | 80 |
81 |
82 | 83 | 84 | 85 | 86 | 87 |
88 |
89 | 90 | 93 | 94 |
95 |
96 | 97 |
98 | 99 |

Buy & Sell Digital Assets In The Cryptex

100 | 101 |

102 | Coin Cryptex is the easiest, safest, and fastest way to buy & sell crypto asset exchange. 103 |

104 | 105 | Get started now 106 | 107 |
108 | 109 |
110 | hero banner 111 |
112 | 113 |
114 |
115 | 116 | 117 | 118 | 119 | 120 | 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 | bitcoin logo 176 | 177 | 178 | Bitcoin BTC/USD 179 | 180 |
    181 | 182 | USD 46,168.95 183 | 184 |
    185 | 36,641.20 186 | 187 |
    -0.79%
    188 |
    189 | 190 |
    191 |
    • 192 | 193 |
  • 194 |
    195 | 196 |
    197 | ethereum logo 198 | 199 | 200 | Ethereum ETH/USD 201 | 202 |
    203 | 204 | USD 3,480.04 205 | 206 |
    207 | 36,641.20 208 | 209 |
    +10.55%
    210 |
    211 | 212 |
    213 |
    • 214 | 215 |
  • 216 |
    217 | 218 |
    219 | tether logo 220 | 221 | 222 | Tether USDT/USD 223 | 224 |
    225 | 226 | USD 1.00 227 | 228 |
    229 | 36,641.20 230 | 231 |
    -0.01%
    232 |
    233 | 234 |
    235 |
    • 236 | 237 |
  • 238 |
    239 | 240 |
    241 | bnb logo 242 | 243 | 244 | BNB BNB/USD 245 | 246 |
    247 | 248 | USD 443.56 249 | 250 |
    251 | 36,641.20 252 | 253 |
    -1.24%
    254 |
    255 | 256 |
    257 |
    • 258 | 259 |
260 | 261 |
262 | 263 |
264 |
265 | 266 | 267 | 268 | 269 | 270 | 273 | 274 |
275 |
276 | 277 |
278 |

Market Update

279 | 280 | See All Coins 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 | 353 | 354 | 355 | 356 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 375 | 376 | 379 | 380 | 381 | 382 | 383 | 384 | 390 | 391 | 392 | 393 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 412 | 413 | 416 | 417 | 418 | 419 | 420 | 421 | 427 | 428 | 429 | 430 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 449 | 450 | 453 | 454 | 455 | 456 | 457 | 458 | 464 | 465 | 466 | 467 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 486 | 487 | 490 | 491 | 492 | 493 | 494 | 495 | 501 | 502 | 503 | 504 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 523 | 524 | 527 | 528 | 529 | 530 | 531 | 532 | 538 | 539 | 540 | 541 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 560 | 561 | 564 | 565 | 566 | 567 | 568 | 569 | 575 | 576 | 577 | 578 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 597 | 598 | 601 | 602 | 603 | 604 | 605 | 606 | 612 | 613 | 614 | 615 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 634 | 635 | 638 | 639 | 640 | 641 | 642 | 643 |
#NameLast Price24h %Market CapLast 7 Days
348 | 352 | 1 357 |
358 | Bitcoin logo 359 | 360 |

361 | Bitcoin BTC 362 |

363 |
364 | 		$56,623.54+1.45%$880,423,640,582 373 | profit chart 374 | 377 | 378 |
385 | 389 | 2 394 |
395 | Ethereum logo 396 | 397 |

398 | Ethereum ETH 399 |

400 |
401 | 		$56,623.54-5.12%$880,423,640,582 410 | loss chart 411 | 414 | 415 |
422 | 426 | 3 431 |
432 | Tether logo 433 | 434 |

435 | Tether USDT/USD 436 |

437 |
438 | 		$56,623.54+1.45%$880,423,640,582 447 | profit chart 448 | 451 | 452 |
459 | 463 | 4 468 |
469 | BNB logo 470 | 471 |

472 | BNB BNB/USD 473 |

474 |
475 | 		$56,623.54-3.75%%$880,423,640,582 484 | loss chart 485 | 488 | 489 |
496 | 500 | 5 505 |
506 | Solana logo 507 | 508 |

509 | Solana SOL 510 |

511 |
512 | 		$56,623.54+1.45%$880,423,640,582 521 | profit chart 522 | 525 | 526 |
533 | 537 | 6 542 |
543 | XRP logo 544 | 545 |

546 | XRP XRP 547 |

548 |
549 | 		$56,623.54-2.22%$880,423,640,582 558 | loss chart 559 | 562 | 563 |
570 | 574 | 7 579 |
580 | Cardano logo 581 | 582 |

583 | Cardano ADA 584 |

585 |
586 | 		$56,623.54+0.8%$880,423,640,582 595 | profit chart 596 | 599 | 600 |
607 | 611 | 8 616 |
617 | Avalanche logo 618 | 619 |

620 | Avalanche AVAX 621 |

622 |
623 | 		$56,623.54+1.41%$880,423,640,582 632 | profit chart 633 | 636 | 637 |
644 | 645 |
646 | 647 |
648 |
649 | 650 | 651 | 652 | 653 | 654 | 657 | 658 |
659 |
660 | 661 |

How It Work

662 | 663 |

664 | Stacks is a production-ready library of stackable content blocks built in React Native. 665 |

666 | 667 |
    668 | 669 |
  • 670 |
    671 | 672 |
    673 | Step 1 675 |
    676 | 677 |

    Step 1

    678 | 679 |

    Download

    680 | 681 |

    682 | Stacks Is A Production-Ready Library Of Stackable Content Blocks Built In React Native. 683 |

    684 | 685 |
    686 |
    • 687 | 688 |
  • 689 |
    690 | 691 |
    692 | Step 2 694 |
    695 | 696 |

    Step 2

    697 | 698 |

    Connect Wallet

    699 | 700 |

    701 | Stacks Is A Production-Ready Library Of Stackable Content Blocks Built In React Native. 702 |

    703 | 704 |
    705 |
    • 706 | 707 |
  • 708 |
    709 | 710 |
    711 | Step 3 713 |
    714 | 715 |

    Step 3

    716 | 717 |

    Start Trading

    718 | 719 |

    720 | Stacks Is A Production-Ready Library Of Stackable Content Blocks Built In React Native. 721 |

    722 | 723 |
    724 |
    • 725 | 726 |
  • 727 |
    728 | 729 |
    730 | Step 4 732 |
    733 | 734 |

    Step 4

    735 | 736 |

    Earn Money

    737 | 738 |

    739 | Stacks Is A Production-Ready Library Of Stackable Content Blocks Built In React Native. 740 |

    741 | 742 |
    743 |
    • 744 | 745 |
746 | 747 |
748 |
749 | 750 | 751 | 752 | 753 | 754 | 757 | 758 |
759 |
760 | 761 |
762 | about banner 764 |
765 | 766 |
767 | 768 |

What Is Cryptex

769 | 770 |

771 | Experience a variety of trading on Bitcost. You can use various types of coin transactions such as Spot 772 | Trade, Futures 773 | Trade, P2P, Staking, Mining, and margin. 774 |

775 | 776 |
    777 | 778 |
  • 779 |
    780 | 781 | 782 |

    View real-time cryptocurrency prices

    783 |
    784 | 785 |

    786 | Experience a variety of trading on Bitcost. You can use various types of coin transactions such as 787 | Spot Trade, Futures 788 | Trade, P2P, Staking, Mining, and margin. 789 |

    790 |
    • 791 | 792 |
  • 793 |
    794 | 795 | 796 |

    Buy and sell BTC, ETH, XRP, OKB, Etc...

    797 |
    798 | 799 |

    800 | Experience a variety of trading on Bitcost. You can use various types of coin transactions such as 801 | Spot Trade, Futures 802 | Trade, P2P, Staking, Mining, and margin. 803 |

    804 |
    • 805 | 806 |
807 | 808 | Explore More 809 | 810 |
811 | 812 |
813 |
814 | 815 | 816 | 817 | 818 | 819 | 822 | 823 |
824 |
825 | 826 |
827 | 828 |

Free Your Money & Invest With Confident

829 | 830 |

831 | With Cryptor Trade, you can be sure your trading skills are matched 832 |

833 | 834 |
    835 | 836 |
  • 837 |
    838 | 839 | 840 |

    Buy, Sell, And Trade On The Go

    841 |
    842 | 843 |

    844 | Manage Your Holdings From Your Mobile Decive 845 |

    846 |
    • 847 | 848 |
  • 849 |
    850 | 851 | 852 |

    Take Control Of Your Wealth

    853 |
    854 | 855 |

    856 | Rest Assured You (And Only You) Have Access To Your Funds 857 |

    858 |
    • 859 | 860 |
861 | 862 |
863 | 864 | get it on google play 866 | 867 | 868 | 869 | download on the app store 871 | 872 |
873 | 874 |
875 | 876 |
877 | app banner 879 | 880 | Scan To Download 881 |
882 | 883 |
884 |
885 | 886 |
887 |
888 | 889 | 890 | 891 | 892 | 893 | 896 | 897 | 1087 | 1088 | 1089 | 1090 | 1091 | 1092 | 1095 | 1096 | 1097 | 1100 | 1101 | 1102 | 1103 | 1104 | 1105 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Cryptex - Buy & Sell Digital Assets In The cryptex 2 | 3 | 4 | 5 | #---------- HEADER ----------# 6 | 7 | alt = Cryptex logo 8 | Cryptex 9 | 10 | Homepage 11 | Buy Crypto 12 | Markets 13 | Sell Crypto 14 | Blog 15 | BITUSDT 16 | 17 | aria-label = Toggle menu 18 | 19 | Wallet 20 | 21 | 22 | 23 | #---------- HERO ----------# 24 | 25 | Buy & Sell Digital Assets In The Cryptex 26 | 27 | Coin Cryptex is the easiest, safest, and fastest way to buy & sell crypto asset exchange. 28 | 29 | Get started now 30 | 31 | alt = hero banner 32 | 33 | 34 | 35 | #---------- TREND ----------# 36 | 37 | Crypto 38 | DeFi 39 | BSC 40 | NFT 41 | Metaverse 42 | Polkadot 43 | Solana 44 | Opensea 45 | Makersplace 46 | 47 | alt = bitcoin logo 48 | 49 | Bitcoin 50 | BTC/USD 51 | 52 | USD 46,168.95 53 | 54 | 36,641.20 55 | -0.79% 56 | 57 | alt = ethereum logo 58 | 59 | Ethereum 60 | ETH/USD 61 | 62 | USD 3,480.04 63 | 64 | +10.55% 65 | 66 | alt = tether logo 67 | 68 | Tether 69 | USDT/USD 70 | 71 | USD 1.00 72 | 73 | -0.01% 74 | 75 | alt = bnb logo 76 | 77 | BNB 78 | BNB/USD 79 | 80 | USD 443.56 81 | 82 | -1.24% 83 | 84 | 85 | 86 | #---------- MARKET ----------# 87 | 88 | Market Update 89 | 90 | See All Coins 91 | 92 | View All 93 | Metaverse 94 | Entertainment 95 | Energy 96 | NFT 97 | Gaming 98 | Music 99 | 100 | # 101 | Name 102 | Last Price 103 | 24h % 104 | Market Cap 105 | Last 7 Days 106 | 107 | aria-label = Add to favourite 108 | 109 | 110 | 111 | 1 112 | alt = Bitcoin logo 113 | Bitcoin 114 | BTC 115 | $56,623.54 116 | +1.45% 117 | $880,423,640,582 118 | alt = profit chart 119 | Trade 120 | 121 | 2 122 | alt = Ethereum logo 123 | Ethereum 124 | ETH 125 | -5.12% 126 | alt = loss chart 127 | 128 | 3 129 | alt = Tether logo 130 | Tether 131 | USDT/USD 132 | +1.45% 133 | alt = profit chart 134 | 135 | 4 136 | alt = BNB logo 137 | BNB 138 | BNB/USD 139 | -3.75% 140 | 141 | 5 142 | alt = Solana logo 143 | Solana 144 | SOL 145 | +1.45% 146 | 147 | 6 148 | alt = XRP logo 149 | XRP 150 | XRP 151 | -2.22% 152 | alt = loss chart 153 | 154 | 7 155 | alt = Cardano logo 156 | Cardano 157 | ADA 158 | +0.8% 159 | alt = profit chart 160 | 161 | 8 162 | alt = Avalanche logo 163 | Avalanche 164 | AVAX 165 | +1.41% 166 | 167 | 168 | 169 | #---------- INSTRUCTION ----------# 170 | 171 | How It Work 172 | 173 | Stacks is a production-ready library of stackable content blocks built in React Native. 174 | 175 | alt = Step 1 176 | Step 1 177 | 178 | Download 179 | 180 | Stacks Is A Production-Ready Library Of Stackable Content Blocks Built In React Native. 181 | 182 | Step 2 183 | Connect Wallet 184 | 185 | Step 3 186 | Start Trading 187 | 188 | Step 4 189 | Earn Money 190 | 191 | 192 | 193 | #---------- ABOUT ----------# 194 | 195 | alt = about banner 196 | 197 | What Is Cryptex 198 | 199 | Experience a variety of trading on Bitcost. You can use various types of coin transactions such as Spot Trade, Futures Trade, P2P, Staking, Mining, and margin. 200 | 201 | 202 | View real-time cryptocurrency prices 203 | 204 | Experience a variety of trading on Bitcost. You can use various types of coin transactions such as Spot Trade, Futures Trade, P2P, Staking, Mining, and margin. 205 | 206 | Buy and sell BTC, ETH, XRP, OKB, Etc... 207 | 208 | Explore More 209 | 210 | 211 | 212 | #---------- APP ----------# 213 | 214 | Free Your Money & Invest With Confident 215 | 216 | With Cryptor Trade, you can be sure your trading skills are matched 217 | 218 | 219 | 220 | Buy, Sell, And Trade On The Go 221 | 222 | Manage Your Holdings From Your Mobile Decive 223 | 224 | Take Control Of Your Wealth 225 | 226 | Rest Assured You (And Only You) Have Access To Your Funds 227 | 228 | alt = get it on google play 229 | alt = download on the app store 230 | 231 | alt = app banner 232 | Scan To Download 233 | 234 | 235 | 236 | #---------- FOOTER ----------# 237 | 238 | alt = Cryptex logo 239 | Cryptex 240 | 241 | Let's talk! 🤙 242 | +12 345 678 9101 243 | 244 | hello.cryptex@gmail.com 245 | 246 | Cecilia Chapman 711-2880 Nulla St. Mankato Mississippi 96522 247 | 248 | Products 249 | 250 | Spot 251 | Inverse Perpetual 252 | USDT Perpetual 253 | Exchange 254 | Launchpad 255 | Binance Pay 256 | 257 | Services 258 | 259 | Buy Crypto 260 | Markets 261 | Tranding Fee 262 | Affiliate Program 263 | Referral Program 264 | API 265 | 266 | Support 267 | 268 | Bybit Learn 269 | Help Center 270 | User Feedback 271 | Submit a request 272 | API Documentation 273 | Trading Rules 274 | 275 | About Us 276 | 277 | About Bybit 278 | Authenticity Check 279 | Careers 280 | Business Contacts 281 | Blog 282 | 283 | © 2022 Cryptex All Rights Reserved by codewithsadee 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | #---------- HEADER ----------# -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptex/8dbb97e4dc25b11c7c450c547049d27727ead4d1/readme-images/desktop.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 11 | ``` 12 | 13 | Ionicon 14 | 15 | ``` html 16 | 17 | 18 | ``` 19 | 20 | --- 21 | 22 | ## Colors 23 | 24 | ``` css 25 | --cadet-blue-crayola: hsl(227, 13%, 73%); 26 | --maximum-yellow-red: hsl(41, 95%, 61%); 27 | --medium-sea-green: hsl(142, 43%, 54%); 28 | --blue-crayola_10: hsla(222, 100%, 61%, 0.05); 29 | --smocky-black_30: hsla(0, 0%, 6%, 0.3); 30 | --eerie-black-1: hsl(240, 5%, 8%); 31 | --eerie-black-2: hsl(228, 9%, 10%); 32 | --raisin-black: hsl(225, 15%, 16%); 33 | --blue-crayola: hsl(222, 100%, 61%); 34 | --roman-silver: hsl(223, 10%, 52%); 35 | --presian-red: hsl(0, 64%, 52%); 36 | --gunmetal_50: hsla(230, 16%, 22%, 0.5); 37 | --gainsboro: hsl(0, 0%, 85%); 38 | --cultured: hsl(0, 0%, 93%); 39 | --white_50: hsla(0, 0%, 100%, 0.5); 40 | --white_30: hsla(0, 0%, 100%, 0.3); 41 | --white_10: hsla(0, 0%, 100%, 0.1); 42 | --black_10: hsla(0, 0%, 0%, 0.1); 43 | --white: hsl(0, 0%, 100%); 44 | ``` 45 | 46 | ## Gradient color 47 | 48 | ``` css 49 | --gradient: linear-gradient(90deg, var(--white_10) 0px 77%, var(--white_50) 92%, transparent); 50 | ``` 51 | 52 | ## Typography 53 | 54 | ``` css 55 | --ff-dm-sans: 'DM Sans', sans-serif; 56 | 57 | --fs-1: 3.2rem; 58 | --fs-2: 3rem; 59 | --fs-3: 2.4rem; 60 | --fs-4: 2rem; 61 | --fs-5: 1.8rem; 62 | --fs-6: 1.5rem; 63 | --fs-7: 1.4rem; 64 | --fs-8: 1.2rem; 65 | 66 | --fw-500: 500; 67 | --fw-700: 700; 68 | ``` 69 | 70 | ## Spacing 71 | 72 | ``` css 73 | --section-padding: 100px; 74 | ``` 75 | 76 | ## Shadow 77 | 78 | ``` css 79 | --shadow-1: 0px 4px 8px var(--black_10); 80 | --shadow-2: 0px 30px 10px -20px var(--smocky-black_30); 81 | --shadow-3: 0px 15px 10px -20px var(--smocky-black_30); 82 | ``` 83 | 84 | ## Border Radius 85 | 86 | ``` css 87 | --radius-12: 12px; 88 | --radius-24: 24px; 89 | ``` 90 | 91 | ## Transition 92 | 93 | ``` css 94 | --transition-1: 0.25s ease; 95 | --transition-2: 0.5s ease; 96 | --transition-3: 1s ease; 97 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 98 | ``` 99 | --------------------------------------------------------------------------------