└── website tutorial ├── app.js ├── images ├── Ellipse 2.png ├── Object │ └── Object │ │ └── Other 18.svg ├── big shadow.svg ├── big.svg ├── blue olivia.svg ├── circle half.png ├── company1.png ├── company2.png ├── company3.png ├── company4.png ├── ellipse 1.png ├── fast shadow.svg ├── fast.svg ├── forbs shadow.svg ├── forbs.svg ├── hero comp.png ├── jesse pinkman.svg ├── layout.svg ├── olivia.svg ├── page end.svg ├── phone.svg ├── saul goodman.svg ├── tech.svg └── walter white.svg ├── index.html └── style.css /website tutorial/app.js: -------------------------------------------------------------------------------- 1 | // HAMBURGER 2 | const hamburger = document.querySelector('.hamburger') 3 | const navUl = document.querySelector('.nav-ul'); 4 | 5 | hamburger.addEventListener('click', function() { 6 | hamburger.classList.toggle('active') 7 | navUl.classList.toggle('active') 8 | }) 9 | 10 | document.querySelectorAll('.nav-a').forEach(n => n.addEventListener('click', function() { 11 | hamburger.classList.remove('active'); 12 | navUl.classList.toggle('active'); 13 | })) 14 | 15 | // SCROLL 16 | 17 | const root = document.documentElement; 18 | const marqueElementsDisplayed = getComputedStyle(root).getPropertyValue('--marque-elements-displayed'); 19 | 20 | const marqueContent = document.querySelector('.marque-content'); 21 | 22 | root.style.setProperty('--marque-elements', marqueContent.children.length); 23 | 24 | for (let i = 0; i < marqueElementsDisplayed; i++) { 25 | marqueContent.appendChild(marqueContent.children[i].cloneNode(true)) 26 | } 27 | 28 | // MEDIA QUERY 29 | const marqueAni = document.getElementById('marque-ani') 30 | const marqueFixed = document.getElementById('marque-fixed') 31 | 32 | function screenChange(e) { 33 | if(e.matches) { // if the screen is above 800px then... 34 | marqueAni.classList.add('hide'); 35 | marqueFixed.classList.remove('hide'); 36 | } else { // if the screen is below 800px then... 37 | marqueFixed.classList.add('hide'); 38 | marqueAni.classList.remove('hide'); 39 | } 40 | } 41 | 42 | const mediaQuery = window.matchMedia('(min-width: 800px)') 43 | 44 | mediaQuery.addListener(screenChange) 45 | 46 | screenChange(mediaQuery) 47 | 48 | // ANIMATIONS 49 | 50 | const observer = new IntersectionObserver((entries) => { 51 | entries.forEach((entry) => { 52 | if (entry.isIntersecting) { 53 | entry.target.classList.add('show'); 54 | } else { 55 | entry.target.classList.remove('show'); 56 | } 57 | }) 58 | }) 59 | 60 | const hiddenElements = document.querySelectorAll('.hidden'); 61 | hiddenElements.forEach((el) => observer.observe(el)); 62 | 63 | const hiddenBlur = document.querySelectorAll('.hiddenb'); 64 | hiddenBlur.forEach((el) => observer.observe(el)); 65 | 66 | const slideRight = document.querySelectorAll('.slide-right'); 67 | slideRight.forEach((el) => observer.observe(el)); 68 | 69 | const slideLeft = document.querySelectorAll('.slide-left'); 70 | slideLeft.forEach((el) => observer.observe(el)); -------------------------------------------------------------------------------- /website tutorial/images/Ellipse 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Carbon45/website-tutorial/aac47a6d8390005c42e5062e93b3d462ab0aa541/website tutorial/images/Ellipse 2.png -------------------------------------------------------------------------------- /website tutorial/images/circle half.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Carbon45/website-tutorial/aac47a6d8390005c42e5062e93b3d462ab0aa541/website tutorial/images/circle half.png -------------------------------------------------------------------------------- /website tutorial/images/company1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Carbon45/website-tutorial/aac47a6d8390005c42e5062e93b3d462ab0aa541/website tutorial/images/company1.png -------------------------------------------------------------------------------- /website tutorial/images/company2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Carbon45/website-tutorial/aac47a6d8390005c42e5062e93b3d462ab0aa541/website tutorial/images/company2.png -------------------------------------------------------------------------------- /website tutorial/images/company3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Carbon45/website-tutorial/aac47a6d8390005c42e5062e93b3d462ab0aa541/website tutorial/images/company3.png -------------------------------------------------------------------------------- /website tutorial/images/company4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Carbon45/website-tutorial/aac47a6d8390005c42e5062e93b3d462ab0aa541/website tutorial/images/company4.png -------------------------------------------------------------------------------- /website tutorial/images/ellipse 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Carbon45/website-tutorial/aac47a6d8390005c42e5062e93b3d462ab0aa541/website tutorial/images/ellipse 1.png -------------------------------------------------------------------------------- /website tutorial/images/fast shadow.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 | -------------------------------------------------------------------------------- /website tutorial/images/fast.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /website tutorial/images/hero comp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Carbon45/website-tutorial/aac47a6d8390005c42e5062e93b3d462ab0aa541/website tutorial/images/hero comp.png -------------------------------------------------------------------------------- /website tutorial/images/page end.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /website tutorial/images/saul goodman.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /website tutorial/images/tech.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 | -------------------------------------------------------------------------------- /website tutorial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | NFT PROJECT 13 | 14 | 15 | 16 |
17 |
18 | 34 |
35 |
36 | 37 | 38 |
39 | 40 | 41 |
42 |
43 | 51 | 54 |
55 |
56 |
57 | 58 | 59 |
60 |
61 |

featured on

62 |
63 |
64 |
65 |
  • 66 |
    • 67 |
  • 68 |
    • 69 |
  • 70 |
    • 71 |
  • 72 |
    • 73 |
    74 |
    75 | 76 |
    77 |
    78 | 79 | 80 | 81 | 82 |
    83 |
    84 |
    85 | 86 | 87 |
    88 |
    89 |
    90 |
    91 | 92 |
    93 |
    94 |

    analytics

    95 |

    Built-in analytics to track your NFTs

    96 |

    Use our built-in analytics dashboard to pull valuable insgihts and monitor the value of your Krypto portfolio over time.

    97 | view our pricing 98 |
    99 |
    100 |
    101 |
    102 | 103 | 104 |
    105 |
    106 |
    107 |
    108 |

    24/7 access

    109 |

    sell your NFTs from anywhere at any time

    110 |

    With our easy-to-use platform, you can buy or sell assets from anywhere in the world, at any time

    111 | get started 112 |
    113 |
    114 | 115 |
    116 |
    117 |
    118 |
    119 | 120 | 121 |
    122 |
    123 |

    testimonials

    124 |

    read what others have to say

    125 |
    126 |
    127 | 128 |

    walter white

    129 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, fugit placeat perferendis eaque eius ipsam deserunt id qui pariatur vel.

    130 |
    131 |
    132 | 133 |

    saul goodman

    134 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, fugit placeat perferendis eaque eius ipsam deserunt id qui pariatur vel.

    135 |
    136 |
    137 | 138 |

    jesse pinkman

    139 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, fugit placeat perferendis eaque eius ipsam deserunt id qui pariatur vel.

    140 |
    141 |
    142 |
    143 |
    144 | 145 | 146 |
    147 |
    148 |
    149 |

    are you ready?

    150 |

    be a part of
    the
    next big thing

    151 | view our pricing 152 |
    153 |
    154 |
    155 | 156 | 157 | 198 | 199 | -------------------------------------------------------------------------------- /website tutorial/style.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | html { 8 | scroll-behavior: smooth; 9 | } 10 | 11 | body { 12 | background-color: #01073D; 13 | color: white; 14 | overflow-x: hidden; 15 | } 16 | 17 | li { 18 | list-style: none; 19 | } 20 | 21 | img { 22 | max-width: 100%; 23 | user-select: none; 24 | } 25 | 26 | a { 27 | text-decoration: none; 28 | } 29 | 30 | /* NAVBAR */ 31 | 32 | header { 33 | position: relative; 34 | font-family: 'Outfit', sans-serif; 35 | } 36 | 37 | .logo-wrap { 38 | text-align: center; 39 | padding: 1em 0; 40 | } 41 | 42 | .logo { 43 | font-size: 2.25rem; 44 | color: white; 45 | font-family: 'Outfit', sans-serif; 46 | font-weight: bold; 47 | } 48 | 49 | .logo:hover { 50 | color: #B4DBDB 51 | } 52 | 53 | .nav-ul { 54 | position: fixed; 55 | top: 0; 56 | left: -100%; 57 | 58 | background-color: #24225A; 59 | width: 100%; 60 | height: 100vh; 61 | text-align: center; 62 | display: flex; 63 | flex-direction: column; 64 | justify-content: space-evenly; 65 | 66 | transition: 0.3s ease; 67 | } 68 | 69 | .nav-li { 70 | font-size: 2rem; 71 | } 72 | 73 | .nav-ul.active { 74 | left: 0; /* this shows on the screen*/ 75 | overflow: hidden; 76 | z-index: 3; 77 | } 78 | 79 | .nav-a { 80 | color: white; 81 | } 82 | 83 | .hamburger { 84 | cursor: pointer; 85 | display: block; 86 | position: absolute; 87 | top: 50%; 88 | transform: translateY(-50%); 89 | right: 1em; 90 | z-index: 4; 91 | } 92 | 93 | .hamburger.active { 94 | position: fixed; 95 | top: 3.5em 96 | } 97 | 98 | .bar { 99 | display: block; 100 | width: 25px; 101 | height: 3px; 102 | margin: 5px auto; 103 | transition: all 0.3s ease-in-out; 104 | background-color: white; 105 | } 106 | 107 | /* HERO */ 108 | .hero { 109 | text-align: center; 110 | } 111 | 112 | .hero h1 { 113 | margin-bottom: 0.5em; 114 | } 115 | 116 | .hero p { 117 | margin-bottom: 3em; 118 | } 119 | 120 | .hero-right img { 121 | margin-top: 3em; 122 | } 123 | 124 | .circle-one { 125 | position: absolute; 126 | right: 0; 127 | top: 5rem; 128 | bottom: 0; 129 | user-select: none; 130 | z-index: -1; 131 | } 132 | 133 | .circle-two { 134 | position: absolute; 135 | top: 0; 136 | left: -50px; 137 | user-select: none; 138 | z-index: -1; 139 | } 140 | 141 | /* COMPANY */ 142 | :root { 143 | --marque-width: 100vw; 144 | --marque-height: 8vh; 145 | /* --marque-elements: 8; */ 146 | --marque-elements-displayed: 4; 147 | --marque-element-width:calc(var(--marque-width)/var(--marque-elements-displayed)); 148 | --marque-animation-duration: calc(var(--marque-elements)*4s); 149 | } 150 | 151 | .marque { 152 | width: var(--marque-width); 153 | height: var(--marque-height); 154 | background-color: #24225A; 155 | overflow: hidden; 156 | position: relative; 157 | user-select: none; 158 | z-index: -1; 159 | } 160 | 161 | .marque-content { 162 | list-style: none; 163 | height: 100%; 164 | display: flex; 165 | animation: scrolling var(--marque-animation-duration) linear infinite; 166 | align-items: center; 167 | } 168 | 169 | @keyframes scrolling { 170 | 0% { 171 | transform: translateX(0vw); 172 | } 173 | 100% { 174 | transform: translateX(calc(-1*var(--marque-element-width)*var(--marque-elements))); 175 | } 176 | } 177 | 178 | .marque-content li { 179 | width: var(--marque-element-width); 180 | flex-shrink: 0; 181 | display: flex; 182 | justify-content: center; 183 | align-items: center; 184 | font-size: 3rem; 185 | white-space: nowrap; 186 | } 187 | 188 | .marque-content li img { 189 | user-select: none; 190 | } 191 | 192 | /* BUY */ 193 | .buy { 194 | text-align: center; 195 | } 196 | 197 | .buy p { 198 | margin-bottom: 3em; 199 | } 200 | 201 | /* BUY TWO */ 202 | .buy-two { 203 | text-align: center; 204 | margin-top: 10em; 205 | } 206 | 207 | .buy-two p { 208 | margin-bottom: 3em; 209 | } 210 | 211 | .buy-two img { 212 | margin-top: 1.5em; 213 | } 214 | 215 | /* TESTIMONIALS */ 216 | .reviews { 217 | text-align: center; 218 | } 219 | 220 | .reviews h1 { 221 | margin-bottom: 2.5em; 222 | } 223 | 224 | .review-title { 225 | color: #AAD9D9; 226 | } 227 | 228 | .grid-item { 229 | background-color: #24225A; 230 | padding: 4em 2em; 231 | position: relative; 232 | margin-bottom: 8em; 233 | } 234 | 235 | .grid-img { 236 | position: absolute; 237 | top: -5.5rem; 238 | left: 50%; 239 | transform: translateX(-50%); 240 | user-select: none; 241 | mix-blend-mode: luminosity; 242 | } 243 | 244 | /* EVENTS */ 245 | .event { 246 | text-align: center; 247 | } 248 | 249 | .event h1 { 250 | margin-bottom: 1em; 251 | } 252 | 253 | .event-wrap { 254 | background: linear-gradient(120deg, #7F7FD6, #9AD5D6); 255 | padding: 3em; 256 | border-radius: 37px; 257 | } 258 | 259 | .event .btn { 260 | background-color: black; 261 | font-size: 1rem; 262 | } 263 | 264 | .event .btn:hover { 265 | background-color: #cc8c2d; 266 | } 267 | 268 | /* FOOTER */ 269 | .footer { 270 | font-family: 'Outfit', sans-serif; 271 | margin-top: 5em; 272 | } 273 | 274 | .footer-col ul li { 275 | margin-bottom: 1em; 276 | } 277 | 278 | .footer-a { 279 | color: white; 280 | font-weight: 200; 281 | } 282 | 283 | .footer-col h4 { 284 | margin-top: 1.5em; 285 | margin-bottom: 1em; 286 | font-weight: 600; 287 | font-size: 1.25rem; 288 | } 289 | 290 | .icons ul { 291 | display: flex; 292 | } 293 | 294 | .icons li { 295 | margin-right: 1em; 296 | } 297 | 298 | .icons a:hover { 299 | color: #9AD5D6 300 | } 301 | 302 | .footer-input { 303 | background-color: #24225A; 304 | padding: 1em 6em 1em 1.5em; 305 | border-radius: 100px; 306 | border: 0; 307 | outline: 0; 308 | font-family: 'Outfit', sans-serif; 309 | font-size: 16px; 310 | color: white; 311 | position: relative; 312 | } 313 | 314 | .footer-btn { 315 | position: absolute; 316 | top: 0; 317 | left: 16em; 318 | } 319 | 320 | .news-wrap { 321 | position: relative; 322 | } 323 | 324 | .footer .btn:hover { 325 | background-color: #cc8c2d; 326 | } 327 | 328 | .newsletter h4 { 329 | margin: 1em 0; 330 | font-size: 1.25rem; 331 | } 332 | 333 | ::placeholder { 334 | color: white; 335 | } 336 | 337 | .page-end { 338 | background: linear-gradient(to right, #9AD4D6, #91D2D2); 339 | width: 100%; 340 | height: 1vh; 341 | } 342 | 343 | /* ANIMATIONS */ 344 | .hamburger.active .bar:nth-child(1) { 345 | transform: translateY(8px) rotate(45deg); 346 | } 347 | 348 | .hamburger.active .bar:nth-child(2) { 349 | opacity: 0; 350 | } 351 | 352 | .hamburger.active .bar:nth-child(3) { 353 | transform: translateY(-8px) rotate(-45deg); 354 | } 355 | 356 | /* TEXT STYLES */ 357 | .h1 { 358 | font-family: 'Outfit', sans-serif; 359 | font-size: 3rem; 360 | text-transform: capitalize; 361 | } 362 | 363 | .body { 364 | font-family: 'Roboto', sans-serif; 365 | font-size: 1.115rem; 366 | } 367 | 368 | .subheading { 369 | font-family: 'Outfit', sans-serif; 370 | font-weight: 600; 371 | font-size: 1.25rem; 372 | letter-spacing: 3px; 373 | text-transform: uppercase; 374 | } 375 | 376 | /* REUSABLES */ 377 | .container { 378 | max-width: 70em; 379 | width: 90%; 380 | margin: 0 auto; 381 | padding: 2em 0; 382 | } 383 | 384 | .nav-container { 385 | max-width: 80em; 386 | width: 90%; 387 | margin: 0 auto; 388 | padding: 1em 0; 389 | } 390 | 391 | .btn { 392 | background-color: #7f7fd6; 393 | color: white; 394 | padding: 1em 1.5em; 395 | border-radius: 100px; 396 | } 397 | 398 | .btn:hover { 399 | background-color: #7f7fd691; 400 | } 401 | 402 | .ghost { 403 | background: none; 404 | border: 2px solid #9AD5D6; 405 | padding: 1em 1.5em; 406 | border-radius: 100px; 407 | color: white; 408 | } 409 | 410 | .ghost:hover { 411 | background-color: #cc8c2d; 412 | } 413 | 414 | .normalizer > *+* { 415 | margin-top: 1.25rem 416 | } 417 | 418 | .hide { 419 | display: none; 420 | } 421 | 422 | 423 | /* MEDIA QUERY */ 424 | 425 | @media (min-width: 800px) { 426 | .split { 427 | display: flex; 428 | justify-content: space-between; 429 | align-items: center; 430 | } 431 | 432 | /* NAVBAR */ 433 | .hamburger { 434 | display: none; 435 | } 436 | 437 | nav { 438 | display: flex; 439 | justify-content: space-between; 440 | align-items: center; 441 | } 442 | .nav-ul { 443 | position: static; 444 | flex-direction: row; 445 | background-color: transparent; 446 | height: 100%; 447 | justify-content: flex-end; 448 | } 449 | 450 | .nav-li { 451 | font-size: 1.5rem; 452 | margin-left: 2em; 453 | } 454 | 455 | .nav-a { 456 | position: relative; 457 | } 458 | 459 | .nav-a::before { 460 | content:''; 461 | width: 0%; 462 | position: absolute; 463 | height: 3px; 464 | background-color: #cc8c2d; 465 | bottom: -2px; 466 | transition: 0.3s ease; 467 | } 468 | 469 | .nav-a:hover::before { 470 | width: 100%; 471 | } 472 | 473 | /* HERO */ 474 | .hero { 475 | text-align: left; 476 | } 477 | 478 | .hero-left { 479 | width: 40%; 480 | } 481 | 482 | /* COMPANY */ 483 | .marque-fixed { 484 | background-color: #24225A; 485 | max-width: 70em; 486 | width: 100%; 487 | margin: 0 auto; 488 | border-radius: 10px; 489 | } 490 | 491 | .marque-list { 492 | display: flex; 493 | justify-content: space-around; 494 | align-items: center; 495 | } 496 | 497 | .marque-fixed img:hover { 498 | opacity: 75%; 499 | } 500 | 501 | /* BUY */ 502 | .buy h2 { 503 | margin-top: 3em; 504 | } 505 | 506 | .buy h1 { 507 | margin-bottom: 0.5em; 508 | } 509 | 510 | .buy-left { 511 | width: 45%; 512 | } 513 | 514 | .buy-right { 515 | width: 50%; 516 | text-align: left; 517 | } 518 | 519 | /* BUY 2 */ 520 | .buy-two { 521 | margin-top: 5em; 522 | } 523 | 524 | .buy-two h1 { 525 | margin-bottom: 0.5em; 526 | } 527 | 528 | .two-left { 529 | width: 45%; 530 | text-align: left; 531 | } 532 | 533 | .two-right { 534 | width: 40%; 535 | } 536 | 537 | /* TESTIMONIALS */ 538 | .reviews { 539 | padding-top: 5em; 540 | } 541 | 542 | .grid-parent { 543 | display: grid; 544 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 545 | gap: 3em; 546 | } 547 | 548 | /* EVENT */ 549 | .event-wrap { 550 | padding: 10em; 551 | } 552 | 553 | .event h1 { 554 | font-size: 3.5rem; 555 | } 556 | 557 | /* FOOTER */ 558 | .row { 559 | display: flex; 560 | justify-content: space-between; 561 | padding-bottom: 3em; 562 | } 563 | 564 | .footer-a:hover { 565 | text-decoration: underline; 566 | } 567 | 568 | /* REUSABLES */ 569 | .h1 { 570 | font-size: 4.25rem; 571 | line-height: 1; 572 | } 573 | 574 | /* ANIMATIONS */ 575 | .hidden { 576 | opacity: 0; 577 | transition: 1s ease; 578 | } 579 | 580 | .hiddenb { 581 | opacity: 0; 582 | filter: blur(5px); 583 | transition: 1s ease; 584 | } 585 | 586 | .slide-right { 587 | opacity: 0; 588 | filter: blur(5px); 589 | transform: translateX(100%); 590 | transition: 1s ease; 591 | } 592 | 593 | .slide-left { 594 | opacity: 0; 595 | filter: blur(5px); 596 | transform: translateX(-100%); 597 | transition: 1s ease; 598 | } 599 | 600 | .show { 601 | opacity: 1; 602 | filter: blur(0); 603 | transform: translateX(0); 604 | } 605 | } 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | @media (max-width: 1050px) and (min-width: 800px) { 614 | .btn-wrap { 615 | display: flex; 616 | flex-direction: column; 617 | } 618 | .btn { 619 | text-align: center; 620 | margin-bottom: 1em; 621 | } 622 | .ghost { 623 | text-align: center; 624 | } 625 | } 626 | 627 | @media (max-width: 420px) { 628 | .btn-wrap { 629 | display: flex; 630 | flex-direction: column; 631 | } 632 | .btn { 633 | margin-bottom: 1em; 634 | } 635 | 636 | .view { 637 | font-size: 1rem; 638 | } 639 | .view-two { 640 | font-size: 0.75rem !important; 641 | } 642 | } 643 | 644 | --------------------------------------------------------------------------------