├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── Thumbs.db │ ├── coin-1.png │ ├── coin-10.png │ ├── coin-2.png │ ├── coin-3.png │ ├── coin-4.png │ ├── coin-5.png │ ├── coin-6.png │ ├── coin-7.png │ ├── coin-8.png │ ├── coin-9.png │ ├── download-banner.png │ ├── hero-banner.png │ ├── instruction-icon-1.svg │ ├── instruction-icon-2.svg │ ├── instruction-icon-3.svg │ ├── instruction-icon-4.svg │ ├── logo.svg │ └── stats-banner.png └── 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/cryptoza) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/cryptoza?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/cryptoza?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/QqCHZhRCFF8?style=social)](https://youtu.be/QqCHZhRCFF8) 8 | 9 |
10 |
11 | 12 |

Cryptoza - Cryptocurrency Wallet Website

13 | 14 | Cryptoza is a fully responsive cryptocurrency wallet 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 | ![Cryptoza 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 **Cryptoza** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/cryptoza.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/cryptoza.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 | * copyright 2022 codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --ultramarine-blue: hsl(222, 100%, 55%); 24 | --silver-metallic: hsl(240, 4%, 71%); 25 | --fiery-rose_12: hsla(354, 86%, 65%, 0.12); 26 | --eerie-black-1: hsl(0, 0%, 13%); 27 | --eerie-black-2: hsl(0, 0%, 12%); 28 | --smokey-black: hsl(40, 100%, 2%); 29 | --silver-sand: hsl(240, 4%, 76%); 30 | --ocean-green: hsl(161, 50%, 57%); 31 | --fiery-rose: hsl(354, 86%, 65%); 32 | --alice-blue: hsl(214, 32%, 91%); 33 | --davys-gray: hsl(0, 0%, 34%); 34 | --blue-ryb: hsl(222, 100%, 45%); 35 | --white_50: hsla(0, 0%, 100%, 0.5); 36 | --white: hsl(0, 0%, 100%); 37 | --onyx-1: hsl(0, 0%, 23%); 38 | --onyx-2: hsl(0, 0%, 20%); 39 | 40 | /** 41 | * typography 42 | */ 43 | 44 | --ff-poppins: 'Poppins', sans-serif; 45 | --ff-open-sans: 'Open Sans', sans-serif; 46 | 47 | --fs-1: calc(2.3rem + 2.1vw); 48 | --fs-2: calc(2.1rem + 0.9vw); 49 | --fs-3: calc(2rem + 0.3vw); 50 | --fs-4: 2rem; 51 | --fs-5: 1.8rem; 52 | --fs-6: 1.5rem; 53 | --fs-7: 1.4rem; 54 | --fs-8: 1.3rem; 55 | --fs-9: 1.2rem; 56 | 57 | --fw-400: 400; 58 | --fw-500: 500; 59 | --fw-600: 600; 60 | --fw-700: 700; 61 | --fw-800: 800; 62 | 63 | /** 64 | * spacing 65 | */ 66 | 67 | --section-padding: 120px; 68 | 69 | /** 70 | * shadow 71 | */ 72 | 73 | --shadow: 0 10px 30px hsla(0, 0%, 0%, 0.1); 74 | 75 | /** 76 | * radius 77 | */ 78 | 79 | --radius-pill: 500px; 80 | --radius-circle: 50%; 81 | --radius-5: 5px; 82 | --radius-8: 8px; 83 | --radius-16: 16px; 84 | 85 | /** 86 | * transition 87 | */ 88 | 89 | --transition: 0.25s ease; 90 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 91 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 92 | 93 | } 94 | 95 | 96 | 97 | 98 | 99 | /*-----------------------------------*\ 100 | #RESET 101 | \*-----------------------------------*/ 102 | 103 | *, 104 | *::before, 105 | *::after { 106 | margin: 0; 107 | padding: 0; 108 | box-sizing: border-box; 109 | } 110 | 111 | li { list-style: none; } 112 | 113 | a, 114 | img, 115 | span, 116 | button, 117 | ion-icon { display: block; } 118 | 119 | a { 120 | color: inherit; 121 | text-decoration: none; 122 | } 123 | 124 | img { height: auto; } 125 | 126 | input, 127 | button { 128 | background: none; 129 | border: none; 130 | font: inherit; 131 | color: inherit; 132 | } 133 | 134 | input, 135 | table { width: 100%; } 136 | 137 | button { cursor: pointer; } 138 | 139 | ion-icon { pointer-events: none; } 140 | 141 | html { 142 | font-family: var(--ff-open-sans); 143 | font-size: 10px; 144 | scroll-behavior: smooth; 145 | } 146 | 147 | body { 148 | background-color: var(--smokey-black); 149 | color: var(--silver-sand); 150 | font-size: 1.6rem; 151 | line-height: 1.75; 152 | } 153 | 154 | body.active { overflow-y: hidden; } 155 | 156 | :focus-visible { outline-offset: 4px; } 157 | 158 | ::-webkit-scrollbar { width: 10px; } 159 | 160 | ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); } 161 | 162 | ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); } 163 | 164 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); } 165 | 166 | 167 | 168 | 169 | 170 | /*-----------------------------------*\ 171 | #REUSED STYLE 172 | \*-----------------------------------*/ 173 | 174 | .container { padding-inline: 15px; } 175 | 176 | .h1, 177 | .h2, 178 | .h3 { 179 | color: var(--white); 180 | font-family: var(--ff-poppins); 181 | line-height: 1.2; 182 | } 183 | 184 | .h1 { 185 | font-size: var(--fs-1); 186 | font-weight: var(--fw-800); 187 | } 188 | 189 | .h2 { font-size: var(--fs-2); } 190 | 191 | .h3 { font-size: var(--fs-5); } 192 | 193 | .btn-group { 194 | display: flex; 195 | align-items: center; 196 | flex-wrap: wrap; 197 | gap: 15px; 198 | } 199 | 200 | .btn { 201 | max-width: max-content; 202 | padding: var(--padding-y, 13px) 28px; 203 | font-family: var(--ff-poppins); 204 | font-weight: var(--fw-500); 205 | } 206 | 207 | .btn-primary { 208 | color: var(--white); 209 | background-color: var(--ultramarine-blue); 210 | font-size: var(--fs-6); 211 | border-radius: var(--radius-pill); 212 | transition: var(--transition); 213 | } 214 | 215 | .btn-primary:is(:hover, :focus) { background-color: var(--blue-ryb); } 216 | 217 | .w-100 { width: 100%; } 218 | 219 | .section { padding-block: var(--section-padding); } 220 | 221 | .section-title { margin-block-end: 24px; } 222 | 223 | .text-center { text-align: center; } 224 | 225 | .grid-list { 226 | display: grid; 227 | gap: 30px; 228 | } 229 | 230 | .bg-gray { background-color: var(--eerie-black-1); } 231 | 232 | .btn-link { 233 | display: flex; 234 | align-items: center; 235 | gap: 5px; 236 | color: var(--white); 237 | font-family: var(--ff-poppins); 238 | font-size: var(--fs-6); 239 | font-weight: var(--fw-500); 240 | } 241 | 242 | .btn-link > * { transition: var(--transition); } 243 | 244 | .btn-link:is(:hover, :focus) { color: var(--ultramarine-blue); } 245 | 246 | .btn-link:is(:hover, :focus) ion-icon { transform: translateX(5px); } 247 | 248 | 249 | 250 | 251 | 252 | /*-----------------------------------*\ 253 | #HEADER 254 | \*-----------------------------------*/ 255 | 256 | .header .btn-group { display: none; } 257 | 258 | .header { 259 | position: fixed; 260 | top: 0; 261 | left: 0; 262 | width: 100%; 263 | padding-block: 28px; 264 | background-color: var(--smokey-black); 265 | transition: var(--transition); 266 | z-index: 4; 267 | } 268 | 269 | .header.active { 270 | background-color: var(--eerie-black-1); 271 | padding-block: 18px; 272 | box-shadow: var(--shadow); 273 | } 274 | 275 | .header .container, 276 | .navbar-top { 277 | display: flex; 278 | justify-content: space-between; 279 | align-items: center; 280 | } 281 | 282 | .nav-open-btn { 283 | color: var(--white_50); 284 | font-size: 30px; 285 | transition: var(--transition); 286 | } 287 | 288 | .nav-open-btn:is(:hover, :focus) { color: var(--ultramarine-blue); } 289 | 290 | .navbar { 291 | position: fixed; 292 | background-color: var(--eerie-black-1); 293 | color: var(--alice-blue); 294 | top: 0; 295 | right: -400px; 296 | max-width: 400px; 297 | width: 100%; 298 | height: 100vh; 299 | padding: 40px 16px; 300 | z-index: 2; 301 | visibility: hidden; 302 | transition: 0.25s var(--cubic-in); 303 | } 304 | 305 | .navbar.active { 306 | visibility: visible; 307 | transform: translateX(-400px); 308 | transition: 0.5s var(--cubic-out); 309 | } 310 | 311 | .navbar-top { margin-block-end: 30px; } 312 | 313 | .nav-close-btn { 314 | background-color: var(--fiery-rose_12); 315 | color: var(--fiery-rose); 316 | font-size: 20px; 317 | padding: 5px; 318 | border-radius: var(--radius-circle); 319 | } 320 | 321 | .nav-close-btn ion-icon { --ionicon-stroke-width: 45px; } 322 | 323 | .navbar-link { 324 | font-family: var(--ff-poppins); 325 | font-size: var(--fs-6); 326 | padding: 8px 16px; 327 | transition: var(--transition); 328 | } 329 | 330 | .navbar-link:is(:hover, :focus) { color: var(--ultramarine-blue); } 331 | 332 | .overlay { 333 | position: fixed; 334 | top: 0; 335 | left: 0; 336 | width: 100vw; 337 | height: 100vh; 338 | background-color: var(--smokey-black); 339 | transition: var(--transition); 340 | pointer-events: none; 341 | opacity: 0; 342 | visibility: hidden; 343 | } 344 | 345 | .overlay.active { 346 | pointer-events: all; 347 | opacity: 0.75; 348 | visibility: visible; 349 | } 350 | 351 | 352 | 353 | 354 | 355 | /*-----------------------------------*\ 356 | #HERO 357 | \*-----------------------------------*/ 358 | 359 | .hero { padding-block-start: calc(var(--section-padding) + 50px); } 360 | 361 | .hero .container { 362 | display: grid; 363 | gap: 70px; 364 | } 365 | 366 | .hero-text { 367 | font-size: var(--fs-4); 368 | margin-block: 10px 50px; 369 | } 370 | 371 | .play-btn { 372 | display: flex; 373 | align-items: center; 374 | gap: 10px; 375 | font-size: var(--fs-7); 376 | font-family: var(--ff-poppins); 377 | font-weight: var(--fw-500); 378 | transition: var(--transition); 379 | } 380 | 381 | .play-btn .icon { 382 | width: 40px; 383 | height: 40px; 384 | display: grid; 385 | place-items: center; 386 | border: 2px solid var(--white); 387 | border-radius: var(--radius-circle); 388 | transition: var(--transition); 389 | } 390 | 391 | .play-btn .span { 392 | color: var(--silver-metallic); 393 | transition: var(--transition); 394 | } 395 | 396 | .play-btn:is(:hover, :focus) .span { color: var(--white); } 397 | 398 | .play-btn:is(:hover, :focus) .icon { 399 | background-color: var(--white); 400 | color: var(--ultramarine-blue); 401 | } 402 | 403 | 404 | 405 | 406 | 407 | /*-----------------------------------*\ 408 | #PROMO 409 | \*-----------------------------------*/ 410 | 411 | .promo .section-text { 412 | padding-inline: 8px; 413 | margin-block-end: 50px; 414 | } 415 | 416 | .promo-card { 417 | border-radius: var(--radius-5); 418 | padding: 40px 25px; 419 | } 420 | 421 | .promo-card .card-icon { 422 | background-color: var(--onyx-1); 423 | color: var(--white); 424 | width: max-content; 425 | font-size: 24px; 426 | padding: 20px; 427 | border-radius: var(--radius-circle); 428 | margin-block-end: 20px; 429 | } 430 | 431 | .promo-card .card-icon ion-icon { --ionicon-stroke-width: 50px; } 432 | 433 | .promo-card .card-text { 434 | color: var(--alice-blue); 435 | margin-block: 20px 16px; 436 | } 437 | 438 | 439 | 440 | 441 | 442 | /*-----------------------------------*\ 443 | #STATS 444 | \*-----------------------------------*/ 445 | 446 | .stats .container { 447 | display: grid; 448 | gap: 50px; 449 | } 450 | 451 | .stats .section-text:last-of-type { margin-block: 16px; } 452 | 453 | .stats-list { 454 | display: grid; 455 | gap: 15px; 456 | } 457 | 458 | .stats-card { 459 | padding: 17px; 460 | border-radius: var(--radius-5); 461 | } 462 | 463 | .stats-card .card-title { 464 | font-size: var(--fs-3); 465 | margin-block-end: 10px; 466 | } 467 | 468 | .stats-card .card-text { 469 | font-size: var(--fs-7); 470 | color: var(--alice-blue); 471 | } 472 | 473 | 474 | 475 | 476 | 477 | /*-----------------------------------*\ 478 | #MARKET 479 | \*-----------------------------------*/ 480 | 481 | .market .section-text { margin-block-end: 24px; } 482 | 483 | .table-container { 484 | overflow-x: auto; 485 | padding-block-end: 15px; 486 | } 487 | 488 | .table-container::-webkit-scrollbar { height: 10px; } 489 | 490 | .table-container::-webkit-scrollbar-track { background-color: var(--eerie-black-2); } 491 | 492 | .table-container::-webkit-scrollbar-thumb { background-color: var(--davys-gray); } 493 | 494 | .table-container::-webkit-scrollbar-button { width: 15px; } 495 | 496 | .market-table { 497 | background-color: var(--eerie-black-2); 498 | border-collapse: collapse; 499 | } 500 | 501 | .table-head { background-color: var(--onyx-2); } 502 | 503 | .table-heading { 504 | color: var(--white); 505 | font-size: var(--fs-7); 506 | font-weight: var(--fw-600); 507 | text-align: left; 508 | padding: 16px 30px; 509 | } 510 | 511 | .table-body .table-row:not(:last-child) { border-block-end: 1px dashed var(--davys-gray); } 512 | 513 | .table-data { padding: 12px 30px; } 514 | 515 | .table-data.wrapper { 516 | display: flex; 517 | align-items: flex-start; 518 | gap: 16px; 519 | } 520 | 521 | .table-data.wrapper img { width: 30px; } 522 | 523 | .table-data .coin-name { 524 | font-size: var(--fs-6); 525 | font-weight: var(--fw-600); 526 | margin-block-end: 5px; 527 | } 528 | 529 | .table-data .span { font-size: var(--fs-8); } 530 | 531 | .table-data:not(.wrapper) { 532 | vertical-align: top; 533 | font-size: var(--fs-7); 534 | } 535 | 536 | .table-data .wrapper-flex { 537 | display: flex; 538 | align-items: center; 539 | gap: 5px; 540 | } 541 | 542 | .table-data .icon { font-size: 12px; } 543 | 544 | .table-data .icon.red { color: var(--fiery-rose); } 545 | 546 | .table-data .icon.green { color: var(--ocean-green); } 547 | 548 | 549 | 550 | 551 | 552 | /*-----------------------------------*\ 553 | #CTA 554 | \*-----------------------------------*/ 555 | 556 | .cta .btn-primary { 557 | display: flex; 558 | justify-content: center; 559 | align-items: center; 560 | gap: 5px; 561 | margin-inline: auto; 562 | margin-block-start: 30px; 563 | } 564 | 565 | 566 | 567 | 568 | 569 | /*-----------------------------------*\ 570 | #INSTRUCTION 571 | \*-----------------------------------*/ 572 | 573 | .instruction .section-text { margin-block-end: 50px; } 574 | 575 | .instruction-card { 576 | padding: 30px; 577 | border-radius: var(--radius-8); 578 | } 579 | 580 | .instruction-card .card-icon { 581 | background-color: var(--smokey-black); 582 | width: 50px; 583 | height: 50px; 584 | display: grid; 585 | place-items: center; 586 | border-radius: var(--radius-circle); 587 | margin-block-end: 15px; 588 | } 589 | 590 | 591 | 592 | 593 | 594 | /*-----------------------------------*\ 595 | #APP 596 | \*-----------------------------------*/ 597 | 598 | .app-card { 599 | padding: 25px; 600 | border-radius: var(--radius-16); 601 | display: grid; 602 | gap: 50px; 603 | } 604 | 605 | .app-card .section-text { margin-block-end: 25px; } 606 | 607 | .app-card .btn-primary { 608 | display: flex; 609 | align-items: center; 610 | gap: 10px; 611 | border: 2px solid var(--ultramarine-blue); 612 | --padding-y: 10px; 613 | } 614 | 615 | .app-card .btn-primary ion-icon { font-size: 25px; } 616 | 617 | .app-card :is(.btn-text, .btn-title) { font-family: var(--ff-open-sans); } 618 | 619 | .app-card .btn-text { 620 | font-size: var(--fs-9); 621 | font-weight: var(--fw-400); 622 | line-height: 1; 623 | } 624 | 625 | .app-card .btn-primary:is(:hover, :focus) { background-color: transparent; } 626 | 627 | .app-card .btn-title { font-weight: var(--fw-600); } 628 | 629 | 630 | 631 | 632 | 633 | /*-----------------------------------*\ 634 | #FOOTER 635 | \*-----------------------------------*/ 636 | 637 | .footer { 638 | text-align: center; 639 | color: var(--alice-blue); 640 | } 641 | 642 | .footer .logo { 643 | max-width: max-content; 644 | margin-inline: auto; 645 | margin-block-end: 30px; 646 | } 647 | 648 | .footer-list { 649 | display: flex; 650 | flex-wrap: wrap; 651 | justify-content: center; 652 | align-items: center; 653 | gap: 10px 30px; 654 | margin-block: 54px 50px; 655 | } 656 | 657 | .footer-link { 658 | color: var(--white); 659 | font-weight: var(--fw-600); 660 | padding-block-end: 4px; 661 | border-block-end: 2px solid transparent; 662 | transition: var(--transition); 663 | } 664 | 665 | .footer-link:is(:hover, :focus) { border-color: var(--ultramarine-blue); } 666 | 667 | .social-list-title { 668 | font-size: var(--fs-3); 669 | font-weight: var(--fw-700); 670 | margin-block-end: 24px; 671 | } 672 | 673 | .social-list { 674 | display: flex; 675 | justify-content: center; 676 | gap: 10px; 677 | } 678 | 679 | .social-link { 680 | background-color: var(--eerie-black-1); 681 | color: var(--white); 682 | font-size: 18px; 683 | padding: 16px; 684 | border-radius: var(--radius-circle); 685 | transition: var(--transition); 686 | } 687 | 688 | .social-link:is(:hover, :focus) { background-color: var(--ultramarine-blue); } 689 | 690 | .footer-bottom { 691 | border-block-start: 1px solid var(--eerie-black-2); 692 | padding-block: 16px; 693 | } 694 | 695 | .copyright { 696 | line-height: 1.3; 697 | margin-block-end: 16px; 698 | } 699 | 700 | .footer-bottom-list { 701 | display: flex; 702 | justify-content: center; 703 | gap: 20px; 704 | } 705 | 706 | 707 | 708 | 709 | 710 | /*-----------------------------------*\ 711 | #MEDIA QUERIES 712 | \*-----------------------------------*/ 713 | 714 | /** 715 | * responsive for large than 575px screen 716 | */ 717 | 718 | @media (min-width: 575px) { 719 | 720 | /** 721 | * REUSED STYLE 722 | */ 723 | 724 | .container { 725 | max-width: 540px; 726 | width: 100%; 727 | margin-inline: auto; 728 | } 729 | 730 | 731 | 732 | /** 733 | * APP 734 | */ 735 | 736 | .app-card .card-banner { 737 | max-width: max-content; 738 | margin-inline: auto; 739 | } 740 | 741 | } 742 | 743 | 744 | 745 | 746 | 747 | /** 748 | * responsive for large than 768px screen 749 | */ 750 | 751 | @media (min-width: 768px) { 752 | 753 | /** 754 | * REUSED STYLE 755 | */ 756 | 757 | .container { max-width: 720px; } 758 | 759 | .grid-list { grid-template-columns: 1fr 1fr; } 760 | 761 | 762 | 763 | /** 764 | * HEADER 765 | */ 766 | 767 | .header .btn-group { 768 | display: flex; 769 | margin-inline: auto 30px; 770 | } 771 | 772 | .ghost-btn { 773 | color: var(--alice-blue); 774 | font-size: var(--fs-6); 775 | transition: var(--transition); 776 | } 777 | 778 | .ghost-btn:is(:hover, :focus) { color: var(--ultramarine-blue); } 779 | 780 | .header .btn-primary { border-radius: var(--radius-5); } 781 | 782 | 783 | 784 | /** 785 | * STATS 786 | */ 787 | 788 | .stats-list { 789 | grid-template-columns: repeat(3, 1fr); 790 | gap: 25px; 791 | } 792 | 793 | 794 | /** 795 | * APP 796 | */ 797 | 798 | .app-card { padding: 50px; } 799 | 800 | 801 | 802 | /** 803 | * FOOTER 804 | */ 805 | 806 | .footer-bottom { padding-block: 26px; } 807 | 808 | .footer-bottom .container { 809 | display: flex; 810 | justify-content: space-between; 811 | align-items: center; 812 | } 813 | 814 | .copyright { margin-block-end: 0; } 815 | 816 | } 817 | 818 | 819 | 820 | 821 | 822 | /** 823 | * responsive for large than 992px screen 824 | */ 825 | 826 | @media (min-width: 992px) { 827 | 828 | /** 829 | * REUSED STYLE 830 | */ 831 | 832 | .container { max-width: 960px; } 833 | 834 | .grid-list { grid-template-columns: repeat(3, 1fr); } 835 | 836 | :is(.section-title, .section-text).text-center { margin-inline: auto; } 837 | 838 | .section-text.text-center { max-width: 60ch; } 839 | 840 | .section-title.text-center { max-width: 30ch; } 841 | 842 | 843 | 844 | /** 845 | * HERO 846 | */ 847 | 848 | .hero .container { 849 | grid-template-columns: 0.8fr 1fr; 850 | align-items: center; 851 | gap: 25px; 852 | } 853 | 854 | 855 | 856 | /** 857 | * STATS 858 | */ 859 | 860 | .stats .container { 861 | grid-template-columns: 1fr 1fr; 862 | align-items: center; 863 | } 864 | 865 | 866 | 867 | /** 868 | * INSTRUCTION 869 | */ 870 | 871 | .instruction .grid-list { grid-template-columns: repeat(4, 1fr); } 872 | 873 | 874 | 875 | /** 876 | * APP 877 | */ 878 | 879 | .app-card { 880 | grid-template-columns: 1fr 1fr; 881 | align-items: center; 882 | } 883 | 884 | 885 | 886 | /** 887 | * FOOTER 888 | */ 889 | 890 | .footer-top .container { max-width: 580px; } 891 | 892 | .footer-list { column-gap: 60px; } 893 | 894 | } 895 | 896 | 897 | 898 | 899 | 900 | /** 901 | * responsive for large than 1200px screen 902 | */ 903 | 904 | @media (min-width: 1200px) { 905 | 906 | /** 907 | * REUSED STYLE 908 | */ 909 | 910 | .container { max-width: 1140px; } 911 | 912 | 913 | 914 | /** 915 | * HEADER 916 | */ 917 | 918 | .nav-open-btn, 919 | .navbar-top { display: none; } 920 | 921 | .navbar { 922 | all: unset; 923 | display: block; 924 | margin-inline: auto; 925 | } 926 | 927 | .navbar-list { display: flex; } 928 | 929 | .navbar-link { font-weight: var(--fw-600); } 930 | 931 | .header .btn-group { margin-inline: 0; } 932 | 933 | 934 | 935 | /** 936 | * APP 937 | */ 938 | 939 | .app-card { padding-inline: 80px; } 940 | 941 | } -------------------------------------------------------------------------------- /assets/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/Thumbs.db -------------------------------------------------------------------------------- /assets/images/coin-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-1.png -------------------------------------------------------------------------------- /assets/images/coin-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-10.png -------------------------------------------------------------------------------- /assets/images/coin-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-2.png -------------------------------------------------------------------------------- /assets/images/coin-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-3.png -------------------------------------------------------------------------------- /assets/images/coin-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-4.png -------------------------------------------------------------------------------- /assets/images/coin-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-5.png -------------------------------------------------------------------------------- /assets/images/coin-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-6.png -------------------------------------------------------------------------------- /assets/images/coin-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-7.png -------------------------------------------------------------------------------- /assets/images/coin-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-8.png -------------------------------------------------------------------------------- /assets/images/coin-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/coin-9.png -------------------------------------------------------------------------------- /assets/images/download-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/download-banner.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/instruction-icon-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/instruction-icon-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/images/instruction-icon-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/images/instruction-icon-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/stats-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/assets/images/stats-banner.png -------------------------------------------------------------------------------- /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 navTogglers = document.querySelectorAll("[data-nav-toggler]"); 27 | const overlay = document.querySelector("[data-overlay]"); 28 | 29 | const toggleNavbar = function () { 30 | navbar.classList.toggle("active"); 31 | overlay.classList.toggle("active"); 32 | document.body.classList.toggle("active"); 33 | } 34 | 35 | addEventOnElem(navTogglers, "click", toggleNavbar); 36 | 37 | 38 | 39 | /** 40 | * active header when window scroll down to 100px 41 | */ 42 | 43 | const header = document.querySelector("[data-header]"); 44 | 45 | const activeElemOnScroll = function () { 46 | if (window.scrollY > 100) { 47 | header.classList.add("active"); 48 | } else { 49 | header.classList.remove("active"); 50 | } 51 | } 52 | 53 | addEventOnElem(window, "scroll", activeElemOnScroll); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | Cryptoza - Trusted & Secure Trading Crypto Wallet 13 | 14 | 15 | 16 | 19 | 20 | 21 | 24 | 25 | 26 | 29 | 30 | 31 | 34 | 35 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 |
49 |
50 | 51 | 54 | 55 | 94 | 95 |
96 | Sign In 97 | 98 | Get Started 99 |
100 | 101 | 104 | 105 |
106 | 107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 |
115 |
116 | 117 | 120 | 121 |
122 |
123 | 124 |
125 | 126 |

Trusted & Secure Trading Crypto Wallet

127 | 128 |

129 | You might wonder why a designer would choose to use Morem text Paragraphs in English or their native 130 | language. 131 |

132 | 133 |
134 | Get Started 135 | 136 | 137 |
138 | 139 |
140 | 141 | How it works 142 | 143 |
144 | 145 |
146 | 147 |
148 |
149 | hero banner 150 |
151 |
152 | 153 |
154 |
155 | 156 | 157 | 158 | 159 | 160 | 163 | 164 |
165 |
166 | 167 |

Most Trusted Cryptocurrency Platform

168 | 169 |

170 | A cryptocurrency is a tradable digital asset or digital form of money, built on blockchain technology that 171 | only exists 172 | online. 173 |

174 | 175 |
    176 | 177 |
  • 178 |
    179 | 180 |
    181 | 182 |
    183 | 184 |

    Best Trading Platform

    185 | 186 |

    187 | Cryptocurrency does not exist in physical form like paper money and is typically not issued by a 188 | central authority. 189 |

    190 | 191 | 192 | Explore More 193 | 194 | 195 | 196 | 197 |
    198 |
    • 199 | 200 |
  • 201 |
    202 | 203 |
    204 | 205 |
    206 | 207 |

    Transparent Pricing

    208 | 209 |

    210 | Cryptocurrency does not exist in physical form like paper money and is typically not issued by a 211 | central authority. 212 |

    213 | 214 | 215 | Explore More 216 | 217 | 218 | 219 | 220 |
    221 |
    • 222 | 223 |
  • 224 |
    225 | 226 |
    227 | 228 |
    229 | 230 |

    Trusted Security

    231 | 232 |

    233 | Cryptocurrency does not exist in physical form like paper money and is typically not issued by a 234 | central authority. 235 |

    236 | 237 | 238 | Explore More 239 | 240 | 241 | 242 | 243 |
    244 |
    • 245 | 246 |
247 | 248 |
249 |
250 | 251 | 252 | 253 | 254 | 255 | 258 | 259 |
260 |
261 | 262 |
263 | 264 |

Our Best Users Are all over the Worldwide Coverage

265 | 266 |

267 | You might wonder why a designer would choose to use Morem text Paragraphs Lorem Ipsum available but the 268 | majority 269 |

270 | 271 |

272 | embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat 273 | predefined 274 | chunks as necessary, making this the first true generator on the Internet. 275 |

276 | 277 |
    278 | 279 |
  • 280 |
    281 | 282 |

    150k+

    283 | 284 |

    285 | Pepole who Have Joined 286 |

    287 | 288 |
    289 |
    • 290 | 291 |
  • 292 |
    293 | 294 |

    45k+

    295 | 296 |

    297 | Pepole who Have Joined 298 |

    299 | 300 |
    301 |
    • 302 | 303 |
  • 304 |
    305 | 306 |

    16k+

    307 | 308 |

    309 | Pepole Joined Altrawallet 310 |

    311 | 312 |
    313 |
    • 314 | 315 |
316 | 317 |
318 | 319 |
320 | map 321 |
322 | 323 |
324 |
325 | 326 | 327 | 328 | 329 | 330 | 333 | 334 |
335 |
336 | 337 |

Crypto Market Live Price

338 | 339 |

340 | Marrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat 341 | predefined true 342 | generator. 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 | 377 | 378 | 381 | 382 | 391 | 392 | 401 | 402 | 411 | 412 | 413 | 414 | 415 | 416 | 425 | 426 | 429 | 430 | 439 | 440 | 449 | 450 | 459 | 460 | 461 | 462 | 463 | 464 | 473 | 474 | 477 | 478 | 487 | 488 | 497 | 498 | 507 | 508 | 509 | 510 | 511 | 512 | 521 | 522 | 525 | 526 | 535 | 536 | 545 | 546 | 555 | 556 | 557 | 558 | 559 | 560 | 569 | 570 | 573 | 574 | 583 | 584 | 593 | 594 | 603 | 604 | 605 | 606 | 607 | 608 | 617 | 618 | 621 | 622 | 631 | 632 | 641 | 642 | 651 | 652 | 653 | 654 | 655 | 656 | 665 | 666 | 669 | 670 | 679 | 680 | 689 | 690 | 699 | 700 | 701 | 702 | 703 | 704 | 713 | 714 | 717 | 718 | 727 | 728 | 737 | 738 | 747 | 748 | 749 | 750 | 751 | 752 | 761 | 762 | 765 | 766 | 775 | 776 | 785 | 786 | 795 | 796 | 797 | 798 | 799 | 800 | 809 | 810 | 813 | 814 | 823 | 824 | 833 | 834 | 843 | 844 | 845 | 846 | 847 | 848 |
CryptocurrencyUSD Price1h % Change24h % Change7d % Change
369 | BTC 370 | 371 |
372 |

Bitcoin

373 | 374 | BTC 375 |
376 | 		379 | 39000 380 | 383 |
384 |
385 | 386 |
387 | 388 | -0.04% 389 |
390 | 		393 |
394 |
395 | 396 |
397 | 398 | -3.26% 399 |
400 | 		403 |
404 |
405 | 406 |
407 | 408 | -7.82% 409 |
410 |
417 | ETH 418 | 419 |
420 |

Ethereum

421 | 422 | ETH 423 |
424 | 		427 | 2896 428 | 431 |
432 |
433 | 434 |
435 | 436 | -0.6% 437 |
438 | 		441 |
442 |
443 | 444 |
445 | 446 | -4.73% 447 |
448 | 		451 |
452 |
453 | 454 |
455 | 456 | -8.89% 457 |
458 |
465 | USDT 466 | 467 |
468 |

Tether

469 | 470 | USDT 471 |
472 | 		475 | 1 476 | 479 |
480 |
481 | 482 |
483 | 484 | -0.01% 485 |
486 | 		489 |
490 |
491 | 492 |
493 | 494 | -0.05% 495 |
496 | 		499 |
500 |
501 | 502 |
503 | 504 | -0.04% 505 |
506 |
513 | BNB 514 | 515 |
516 |

Tether

517 | 518 | USDT 519 |
520 | 		523 | 398 524 | 527 |
528 |
529 | 530 |
531 | 532 | -0.27% 533 |
534 | 		537 |
538 |
539 | 540 |
541 | 542 | -3.92% 543 |
544 | 		547 |
548 |
549 | 550 |
551 | 552 | -4.57% 553 |
554 |
561 | USDC 562 | 563 |
564 |

USD Coin

565 | 566 | USDC 567 |
568 | 		571 | 0 572 | 575 |
576 |
577 | 578 |
579 | 580 | -0.04% 581 |
582 | 		585 |
586 |
587 | 588 |
589 | 590 | -0.13% 591 |
592 | 		595 |
596 |
597 | 598 |
599 | 600 | 0.05% 601 |
602 |
609 | XRP 610 | 611 |
612 |

XRP

613 | 614 | XRP 615 |
616 | 		619 | 0 620 | 623 |
624 |
625 | 626 |
627 | 628 | -0.3% 629 |
630 | 		633 |
634 |
635 | 636 |
637 | 638 | -5.71% 639 |
640 | 		643 |
644 |
645 | 646 |
647 | 648 | -1.18% 649 |
650 |
657 | SOL 658 | 659 |
660 |

Solana

661 | 662 | SOL 663 |
664 | 		667 | 95 668 | 671 |
672 |
673 | 674 |
675 | 676 | -0.81% 677 |
678 | 		681 |
682 |
683 | 684 |
685 | 686 | -6.06% 687 |
688 | 		691 |
692 |
693 | 694 |
695 | 696 | -13.66% 697 |
698 |
705 | ADA 706 | 707 |
708 |

Cardana

709 | 710 | ADA 711 |
712 | 		715 | 0 716 | 719 |
720 |
721 | 722 |
723 | 724 | 0.34% 725 |
726 | 		729 |
730 |
731 | 732 |
733 | 734 | -7.43% 735 |
736 | 		739 |
740 |
741 | 742 |
743 | 744 | -13.43% 745 |
746 |
753 | LUNA 754 | 755 |
756 |

Terra

757 | 758 | LUNA 759 |
760 | 		763 | 76 764 | 767 |
768 |
769 | 770 |
771 | 772 | -0.21% 773 |
774 | 		777 |
778 |
779 | 780 |
781 | 782 | -6.12% 783 |
784 | 		787 |
788 |
789 | 790 |
791 | 792 | -13.79% 793 |
794 |
801 | AVAX 802 | 803 |
804 |

Avalanche

805 | 806 | AVAX 807 |
808 | 		811 | 73 812 | 815 |
816 |
817 | 818 |
819 | 820 | -0.63% 821 |
822 | 		825 |
826 |
827 | 828 |
829 | 830 | -6.23% 831 |
832 | 		835 |
836 |
837 | 838 |
839 | 840 | -11.01% 841 |
842 |
849 |
850 | 851 |
852 |
853 | 854 | 855 | 856 | 857 | 858 | 861 | 862 |
863 |
864 | 865 |

Start Trading on Quiety

866 | 867 |

868 | If you use this site regularly and would like to help keep the site on the Internet, please consider 869 | donating a small. 870 |

871 | 872 | 873 | Read Reviews 874 | 875 | 876 | 877 | 878 |
879 |
880 | 881 | 882 | 883 | 884 | 885 | 888 | 889 |
890 |
891 | 892 |

How it All Started

893 | 894 |

895 | There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in 896 | some form, 897 | by injected 898 |

899 | 900 |
    901 | 902 |
  • 903 |
    904 | 905 |
    906 | icon 907 |
    908 | 909 |

    910 | In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful 911 | content. 912 |

    913 | 914 |
    915 |
    • 916 | 917 |
  • 918 |
    919 | 920 |
    921 | icon 922 |
    923 | 924 |

    925 | In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful 926 | content. 927 |

    928 | 929 |
    930 |
    • 931 | 932 |
  • 933 |
    934 | 935 |
    936 | icon 937 |
    938 | 939 |

    940 | In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful 941 | content. 942 |

    943 | 944 |
    945 |
    • 946 | 947 |
  • 948 |
    949 | 950 |
    951 | icon 952 |
    953 | 954 |

    955 | In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful 956 | content. 957 |

    958 | 959 |
    960 |
    • 961 | 962 |
963 | 964 |
965 |
966 | 967 | 968 | 969 | 970 | 971 | 974 | 975 |
976 |
977 | 978 |
979 | 980 |
981 | 982 |

Also Available on IOS & Android

983 | 984 |

985 | This site regularly and would like to help keep the site on the Internet please consider donating a 986 | small. 987 |

988 | 989 |
990 | 991 | 992 | 993 | 994 |
995 |

Available on the

996 | 997 |

Play Store

998 |
999 | 1000 | 1001 | 1002 | 1003 | 1004 |
1005 |

Available on the

1006 | 1007 |

Apple Store

1008 |
1009 | 1010 | 1011 |
1012 | 1013 |
1014 | 1015 |
1016 | download banner 1018 |
1019 | 1020 |
1021 | 1022 |
1023 |
1024 | 1025 |
1026 |
1027 | 1028 | 1029 | 1030 | 1031 | 1032 | 1035 | 1036 | 1139 | 1140 | 1141 | 1142 | 1143 | 1144 | 1147 | 1148 | 1149 | 1152 | 1153 | 1154 | 1155 | 1156 | 1157 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Cryptoza - Trusted & Secure Trading Crypto Wallet 2 | 3 | This is a cryptocurrency wallet html template made by codewithsadee. 4 | 5 | 6 | 7 | #---------- HEADER ----------# 8 | 9 | alt = Cryptoza home 10 | 11 | aria-label = close menu 12 | 13 | 14 | Home 15 | Services 16 | Resources 17 | Pricing 18 | Company 19 | 20 | Sign In 21 | Get Started 22 | 23 | aria-label = open menu 24 | 25 | 26 | 27 | 28 | #---------- HERO ----------# 29 | 30 | Trusted & Secure Trading Crypto Wallet 31 | 32 | You might wonder why a designer would choose to use Morem text Paragraphs in English or their native language. 33 | 34 | Get Started 35 | 36 | 37 | How it works 38 | 39 | alt = hero banner 40 | 41 | 42 | 43 | #---------- PROMO ----------# 44 | 45 | Most Trusted Cryptocurrency Platform 46 | 47 | A cryptocurrency is a tradable digital asset or digital form of money, built on blockchain technology that only exists online. 48 | 49 | 50 | Best Trading Platform 51 | 52 | Cryptocurrency does not exist in physical form like paper money and is typically not issued by a central authority. 53 | 54 | Explore More 55 | 56 | 57 | 58 | Transparent Pricing 59 | 60 | 61 | Trusted Security 62 | 63 | 64 | 65 | #---------- STATS ----------# 66 | 67 | Our Best Users Are all over the Worldwide Coverage 68 | 69 | You might wonder why a designer would choose to use Morem text Paragraphs Lorem Ipsum available but the majority 70 | 71 | embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. 72 | 73 | 150k+ 74 | Pepole who Have Joined 75 | 76 | 45k+ 77 | 78 | 16k+ 79 | Pepole Joined Altrawallet 80 | 81 | alt = map 82 | 83 | 84 | 85 | #---------- MARKET ----------# 86 | 87 | Crypto Market Live Price 88 | 89 | Marrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined true generator. 90 | 91 | Cryptocurrency 92 | USD Price 93 | 1h % Change 94 | 24h % Change 95 | 7d % Change 96 | 97 | alt = BTC 98 | Bitcoin 99 | BTC 100 | 39000 101 | 102 | 103 | -0.04% 104 | -3.26% 105 | -7.82% 106 | 107 | alt = ETH 108 | Ethereum 109 | ETH 110 | 2896 111 | 112 | -0.6% 113 | -4.73% 114 | -8.89% 115 | 116 | alt = USDT 117 | Tether 118 | USDT 119 | 1 120 | 121 | -0.01% 122 | -0.05% 123 | -0.04% 124 | 125 | alt = BNB 126 | Tether 127 | USDT 128 | 398 129 | 130 | -0.27% 131 | -3.92% 132 | -4.57% 133 | 134 | alt = USDC 135 | USD Coin 136 | USDC 137 | 0 138 | 139 | -0.04% 140 | -0.13% 141 | 142 | 0.05% 143 | 144 | alt = XRP 145 | XRP 146 | XRP 147 | 0 148 | 149 | -0.3% 150 | -5.71% 151 | -1.18% 152 | 153 | alt = SOL 154 | Solana 155 | SOL 156 | 95 157 | 158 | -0.81% 159 | -6.06% 160 | -13.66% 161 | 162 | alt = ADA 163 | Cardana 164 | ADA 165 | 0 166 | 167 | 168 | 0.34% 169 | -7.43% 170 | -13.43% 171 | 172 | alt = LUNA 173 | Terra 174 | LUNA 175 | 76 176 | 177 | -0.21% 178 | -6.12% 179 | -13.79% 180 | 181 | alt = AVAX 182 | Avalanche 183 | AVAX 184 | 73 185 | 186 | -0.63% 187 | -6.23% 188 | -11.01% 189 | 190 | 191 | 192 | #---------- CTA ----------# 193 | 194 | Start Trading on Quiety 195 | 196 | If you use this site regularly and would like to help keep the site on the Internet, please consider donating a small. 197 | 198 | Read Reviews 199 | 200 | 201 | 202 | 203 | #---------- INSTRUCTION ----------# 204 | 205 | How it All Started 206 | 207 | There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected 208 | 209 | alt = icon 210 | 211 | In publishing and graphic design, Lorem used to demonstrate the visual form of relying on meaningful content. 212 | 213 | 214 | 215 | #---------- DOWNLOAD ----------# 216 | 217 | Also Available on IOS & Android 218 | 219 | This site regularly and would like to help keep the site on the Internet please consider donating a small. 220 | 221 | 222 | 223 | Available on the 224 | Play Store 225 | 226 | 227 | Apple Store 228 | 229 | alt = download banner 230 | 231 | 232 | 233 | #---------- FOOTER ----------# 234 | 235 | alt = Cryptoza home 236 | 237 | Bitcoin, first released as open-source software in is the first decentralized cryptocurrency. Since the release of bitcoin 238 | 239 | Home 240 | About 241 | Market 242 | Trading 243 | Team 244 | 245 | Join the Conversation 246 | 247 | 248 | 249 | 250 | 251 | 252 | Copyright codewithsadee 2022. All rights reserved. 253 | 254 | Support 255 | Privacy Policy -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/cryptoza/b69162306b065ab878904ae0ff52d1d7e7e2141f/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 | --ultramarine-blue: hsl(222, 100%, 55%); 26 | --silver-metallic: hsl(240, 4%, 71%); 27 | --fiery-rose_12: hsla(354, 86%, 65%, 0.12); 28 | --eerie-black-1: hsl(0, 0%, 13%); 29 | --eerie-black-2: hsl(0, 0%, 12%); 30 | --smokey-black: hsl(40, 100%, 2%); 31 | --silver-sand: hsl(240, 4%, 76%); 32 | --ocean-green: hsl(161, 50%, 57%); 33 | --fiery-rose: hsl(354, 86%, 65%); 34 | --alice-blue: hsl(214, 32%, 91%); 35 | --davys-gray: hsl(0, 0%, 34%); 36 | --blue-ryb: hsl(222, 100%, 45%); 37 | --white_50: hsla(0, 0%, 100%, 0.5); 38 | --white: hsl(0, 0%, 100%); 39 | --onyx-1: hsl(0, 0%, 23%); 40 | --onyx-2: hsl(0, 0%, 20%); 41 | ``` 42 | 43 | ## Typography 44 | 45 | ``` css 46 | --ff-poppins: 'Poppins', sans-serif; 47 | --ff-open-sans: 'Open Sans', sans-serif; 48 | 49 | --fs-1: calc(2.3rem + 2.1vw); 50 | --fs-2: calc(2.1rem + 0.9vw); 51 | --fs-3: calc(2rem + 0.3vw); 52 | --fs-4: 2rem; 53 | --fs-5: 1.8rem; 54 | --fs-6: 1.5rem; 55 | --fs-7: 1.4rem; 56 | --fs-8: 1.3rem; 57 | --fs-9: 1.2rem; 58 | 59 | --fw-400: 400; 60 | --fw-500: 500; 61 | --fw-600: 600; 62 | --fw-700: 700; 63 | --fw-800: 800; 64 | ``` 65 | 66 | ## Spacing 67 | 68 | ``` css 69 | --section-padding: 120px; 70 | ``` 71 | 72 | ## Shadow 73 | 74 | ``` css 75 | --shadow: 0 10px 30px hsla(0, 0%, 0%, 0.1); 76 | ``` 77 | 78 | ## Border Radius 79 | 80 | ``` css 81 | --radius-pill: 500px; 82 | --radius-circle: 50%; 83 | --radius-5: 5px; 84 | --radius-8: 8px; 85 | --radius-16: 16px; 86 | ``` 87 | 88 | ## Transition 89 | 90 | ``` css 91 | --transition: 0.25s ease; 92 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 93 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 94 | ``` 95 | --------------------------------------------------------------------------------