├── assets ├── css │ └── style.css ├── font │ ├── font.css │ └── gilroy │ │ ├── Gilroy-Bold.woff2 │ │ ├── Gilroy-ExtraBold.woff2 │ │ ├── Gilroy-Light.woff2 │ │ ├── Gilroy-Medium.woff2 │ │ └── Gilroy-Regular.woff2 ├── images │ ├── Thumbs.db │ ├── about-banner.png │ ├── category-1.svg │ ├── category-2.svg │ ├── category-3.svg │ ├── category-4.svg │ ├── category-5.svg │ ├── category-6.svg │ ├── category-bg.png │ ├── course-1.png │ ├── course-2.png │ ├── course-3.png │ ├── course-4.png │ ├── course-5.png │ ├── course-6.png │ ├── course-bg.png │ ├── facebook.svg │ ├── file-outline.svg │ ├── footer-bg.png │ ├── hero-banner.png │ ├── hero-bg.png │ ├── ins-1.png │ ├── ins-2.png │ ├── ins-3.png │ ├── ins-4.png │ ├── ins-5.png │ ├── ins-6.png │ ├── instagram.svg │ ├── line-shape.svg │ ├── logo-footer.svg │ ├── logo.svg │ ├── pinterest.svg │ ├── search.svg │ ├── star-fill.svg │ ├── twitter.svg │ └── user-outline.svg └── js │ └── script.js ├── favicon.svg ├── index.html └── style-guide.md /assets/css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | 3 | /** 4 | * colors 5 | */ 6 | 7 | --selective-yellow: hsl(42, 100%, 56%); 8 | --roman-silver: hsl(240, 6%, 51%); 9 | --roman-silver_10: hsla(240, 6%, 51%, 0.1); 10 | --light-coral: hsl(357, 100%, 75%); 11 | --oxford-blue: hsl(224, 53%, 10%); 12 | --light-gray: hsl(0, 0%, 80%); 13 | --keppei: hsl(173, 60%, 47%); 14 | --white: hsl(0, 0%, 100%); 15 | --black: hsl(0, 0%, 0%); 16 | --black_10: hsla(0, 0%, 0%, 0.1); 17 | 18 | /** 19 | * typography 20 | */ 21 | 22 | --ff-gilroy: "Gilroy", sans-serif; 23 | 24 | --headline-lg: 4.8rem; 25 | --headline-md: 3rem; 26 | --headline-sm: 2.4rem; 27 | --title-lg: 2.2rem; 28 | --title-md: 2rem; 29 | --title-sm: 1.8rem; 30 | 31 | --fw-500: 500; 32 | --fw-600: 600; 33 | --fw-700: 700; 34 | 35 | /** 36 | * spacing 37 | */ 38 | 39 | --section-padding: 56px; 40 | 41 | /** 42 | * box shadow 43 | */ 44 | 45 | --shadow-1: 0px 35px 65px -10px hsla(0, 0%, 0%, 0.05); 46 | --shadow-2: 0 10px 40px hsla(0, 0%, 0%, 0.06); 47 | 48 | /** 49 | * border radius 50 | */ 51 | 52 | --radius-4: 4px; 53 | --radius-6: 6px; 54 | --radius-8: 8px; 55 | --radius-circle: 50%; 56 | 57 | /** 58 | * transition 59 | */ 60 | 61 | --transition: 0.25s ease; 62 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 63 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); 64 | 65 | } 66 | 67 | 68 | 69 | 70 | 71 | /*-----------------------------------*\ 72 | #RESET 73 | \*-----------------------------------*/ 74 | 75 | *, 76 | *::before, 77 | *::after { 78 | margin: 0; 79 | padding: 0; 80 | box-sizing: border-box; 81 | } 82 | 83 | li { 84 | list-style: none; 85 | } 86 | 87 | a, 88 | img, 89 | span, 90 | button, 91 | ion-icon { 92 | display: block; 93 | } 94 | 95 | a { 96 | text-decoration: none; 97 | color: inherit; 98 | } 99 | 100 | img { 101 | height: auto; 102 | } 103 | 104 | button { 105 | background: none; 106 | border: none; 107 | font: inherit; 108 | cursor: pointer; 109 | } 110 | 111 | html { 112 | font-family: var(--ff-gilroy); 113 | font-size: 10px; 114 | scroll-behavior: smooth; 115 | } 116 | 117 | body { 118 | background-color: var(--white); 119 | color: var(--roman-silver); 120 | font-size: 1.6rem; 121 | line-height: 1.5; 122 | overflow: hidden; 123 | } 124 | 125 | body.loaded { 126 | overflow: visible; 127 | } 128 | 129 | body.nav-active { 130 | overflow: hidden; 131 | } 132 | 133 | 134 | 135 | 136 | 137 | /*-----------------------------------*\ 138 | #REUSED STYLE 139 | \*-----------------------------------*/ 140 | 141 | .container { 142 | padding-inline: 16px; 143 | } 144 | 145 | .headline-lg, 146 | .headline-md, 147 | .headline-sm, 148 | .title-lg { 149 | color: var(--oxford-blue); 150 | font-weight: var(--fw-700); 151 | } 152 | 153 | .headline-lg { 154 | font-size: var(--headline-lg); 155 | line-height: 1.3; 156 | } 157 | 158 | .headline-md { 159 | font-size: var(--headline-md); 160 | line-height: 1.2; 161 | } 162 | 163 | .headline-sm { 164 | font-size: var(--headline-sm); 165 | } 166 | 167 | .title-lg { 168 | font-size: var(--title-lg); 169 | line-height: 1.4; 170 | } 171 | 172 | .title-md { 173 | font-size: var(--title-md); 174 | } 175 | 176 | .title-sm { 177 | font-size: var(--title-sm); 178 | font-weight: var(--fw-500); 179 | } 180 | 181 | .section { 182 | padding-block: var(--section-padding); 183 | } 184 | 185 | .has-bg-image { 186 | background-repeat: no-repeat; 187 | background-size: cover; 188 | background-position: center; 189 | } 190 | 191 | .has-before, 192 | .has-after { 193 | position: relative; 194 | z-index: 1; 195 | } 196 | 197 | .has-before::before, 198 | .has-after::after { 199 | content: ""; 200 | position: absolute; 201 | } 202 | 203 | .btn { 204 | --bg: var(--light-coral); 205 | max-width: max-content; 206 | background-color: var(--bg); 207 | color: var(--white); 208 | font-weight: var(--fw-500); 209 | padding: 12px 24px; 210 | border-radius: var(--radius-6); 211 | transition: var(--transition); 212 | outline: none; 213 | } 214 | 215 | .btn-secondary { 216 | --bg: var(--oxford-blue); 217 | } 218 | 219 | :is(.btn-primary, .btn-secondary):is(:hover, :focus-visible) { 220 | box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--bg); 221 | } 222 | 223 | .btn-tertiary { 224 | --bg: var(--white); 225 | color: var(--oxford-blue); 226 | font-weight: var(--fw-600); 227 | } 228 | 229 | :is(.headline-lg, .headline-md) .span { 230 | color: var(--light-coral); 231 | display: inline; 232 | } 233 | 234 | .section-subtitle { 235 | font-weight: var(--fw-600); 236 | color: var(--keppei); 237 | margin-block-end: 4px; 238 | } 239 | 240 | .text-center { 241 | text-align: center; 242 | } 243 | 244 | .section-title { 245 | margin-block-end: 24px; 246 | } 247 | 248 | .headline-md .has-after { 249 | padding-block-end: 8px; 250 | } 251 | 252 | .headline-md .has-after::after { 253 | background-image: url("../images/line-shape.svg"); 254 | width: 100%; 255 | height: 100%; 256 | top: 0; 257 | left: 0; 258 | background-repeat: no-repeat; 259 | background-position: center bottom; 260 | background-size: contain; 261 | z-index: -1; 262 | } 263 | 264 | .grid-list { 265 | display: grid; 266 | gap: 28px; 267 | } 268 | 269 | .card { 270 | position: relative; 271 | background-color: var(--white); 272 | padding: 24px; 273 | border-radius: var(--radius-8); 274 | transition: var(--transition); 275 | } 276 | 277 | .card:is(:hover, :focus-within) { 278 | box-shadow: var(--shadow-1); 279 | } 280 | 281 | .layer-link { 282 | position: absolute; 283 | top: 0; 284 | left: 0; 285 | width: 100%; 286 | height: 100%; 287 | } 288 | 289 | .w-100 { 290 | width: 100%; 291 | } 292 | 293 | .img-cover { 294 | width: 100%; 295 | height: 100%; 296 | object-fit: cover; 297 | } 298 | 299 | 300 | 301 | 302 | 303 | /*-----------------------------------*\ 304 | #PRELOADER 305 | \*-----------------------------------*/ 306 | 307 | .preloader { 308 | position: fixed; 309 | top: 0; 310 | left: 0; 311 | width: 100%; 312 | height: 100vh; 313 | background-color: var(--light-coral); 314 | display: grid; 315 | place-items: center; 316 | z-index: 6; 317 | transition: var(--transition); 318 | } 319 | 320 | .preloader.loaded { 321 | visibility: hidden; 322 | opacity: 0; 323 | } 324 | 325 | .preloader .circle { 326 | width: 50px; 327 | height: 50px; 328 | border-radius: var(--radius-circle); 329 | border: 4px solid var(--white); 330 | border-block-start-color: transparent; 331 | animation: rotate360 1s ease infinite; 332 | } 333 | 334 | @keyframes rotate360 { 335 | 0% { 336 | transform: rotate(0); 337 | } 338 | 339 | 100% { 340 | transform: rotate(1turn); 341 | } 342 | } 343 | 344 | 345 | 346 | 347 | 348 | /*-----------------------------------*\ 349 | #HEADER 350 | \*-----------------------------------*/ 351 | 352 | .header .btn { 353 | display: none; 354 | } 355 | 356 | .header { 357 | position: absolute; 358 | top: 0; 359 | left: 0; 360 | width: 100%; 361 | padding-block: 32px; 362 | z-index: 4; 363 | } 364 | 365 | .header.active { 366 | background-color: var(--white); 367 | position: fixed; 368 | box-shadow: var(--shadow-2); 369 | animation: headerActive 0.5s ease forwards; 370 | } 371 | 372 | @keyframes headerActive { 373 | 0% { 374 | transform: translateY(-100%); 375 | } 376 | 377 | 100% { 378 | transform: translateY(0); 379 | } 380 | } 381 | 382 | .header .container, 383 | .navbar-top { 384 | display: flex; 385 | justify-content: space-between; 386 | align-items: center; 387 | } 388 | 389 | .nav-open-btn, 390 | .nav-close-btn { 391 | font-size: 32px; 392 | } 393 | 394 | .navbar { 395 | position: fixed; 396 | top: 0; 397 | left: -320px; 398 | max-width: 320px; 399 | width: 100%; 400 | background-color: var(--white); 401 | height: 100vh; 402 | padding: 40px 16px; 403 | z-index: 2; 404 | transition: 0.25s var(--cubic-in); 405 | visibility: hidden; 406 | } 407 | 408 | .navbar.active { 409 | transition: 0.5s var(--cubic-out); 410 | visibility: visible; 411 | transform: translateX(320px); 412 | } 413 | 414 | .navbar-top { 415 | margin-block-end: 34px; 416 | } 417 | 418 | .nav-close-btn ion-icon { 419 | --ionicon-stroke-width: 35px; 420 | } 421 | 422 | .navbar-item:not(:last-child) { 423 | border-block-end: 1px solid var(--black_10); 424 | } 425 | 426 | .navbar-link { 427 | padding-block: 8px; 428 | transition: var(--transition); 429 | } 430 | 431 | .navbar-link:is(:hover, :focus-visible) { 432 | color: var(--oxford-blue); 433 | } 434 | 435 | .overlay { 436 | position: fixed; 437 | top: 0; 438 | left: 0; 439 | width: 100%; 440 | height: 100vh; 441 | background-color: var(--black); 442 | opacity: 0; 443 | visibility: hidden; 444 | transition: var(--transition); 445 | } 446 | 447 | .overlay.active { 448 | opacity: 0.6; 449 | visibility: visible; 450 | } 451 | 452 | 453 | 454 | 455 | 456 | /*-----------------------------------*\ 457 | #HERO 458 | \*-----------------------------------*/ 459 | 460 | .hero-banner { 461 | display: none; 462 | } 463 | 464 | .hero { 465 | padding-block-start: calc(var(--pt, 96px) + var(--section-padding)); 466 | } 467 | 468 | .hero .title-md { 469 | font-weight: var(--fw-500); 470 | padding-inline-start: 16px; 471 | margin-block: 24px 44px; 472 | } 473 | 474 | .hero .title-md::before { 475 | top: 0; 476 | left: 0; 477 | width: 2px; 478 | height: 100%; 479 | background-color: var(--light-coral); 480 | } 481 | 482 | .hero .btn-group { 483 | display: flex; 484 | flex-wrap: wrap; 485 | gap: 12px; 486 | } 487 | 488 | 489 | 490 | 491 | 492 | /*-----------------------------------*\ 493 | #CATEGORY 494 | \*-----------------------------------*/ 495 | 496 | .category .grid-list { 497 | padding-block: 40px 52px; 498 | } 499 | 500 | .category-card { 501 | display: flex; 502 | align-items: flex-start; 503 | gap: 20px; 504 | border-inline-start: 4px solid transparent; 505 | } 506 | 507 | .category-card:is(:hover, :focus-within) { 508 | border-color: var(--light-coral); 509 | } 510 | 511 | .category-card .title-sm { 512 | margin-block-start: 4px; 513 | } 514 | 515 | .category .btn { 516 | margin-inline: auto; 517 | } 518 | 519 | 520 | 521 | 522 | 523 | /*-----------------------------------*\ 524 | #ABOUT 525 | \*-----------------------------------*/ 526 | 527 | .about .container { 528 | display: grid; 529 | gap: 30px; 530 | } 531 | 532 | .about .section-text, 533 | .progress-list li:not(:last-child) { 534 | margin-block-end: 32px; 535 | } 536 | 537 | .progress-label-wrapper { 538 | display: flex; 539 | justify-content: space-between; 540 | margin-block-end: 8px; 541 | } 542 | 543 | .progress-label-wrapper .title-sm { 544 | color: var(--oxford-blue); 545 | font-weight: var(-fw-600); 546 | } 547 | 548 | .progress { 549 | background-color: var(--roman-silver_10); 550 | height: 6px; 551 | border-radius: var(--radius-6); 552 | } 553 | 554 | .progress-fill { 555 | height: 100%; 556 | border-radius: inherit; 557 | } 558 | 559 | .progress-fill.red { 560 | background-color: var(--light-coral); 561 | width: 86%; 562 | } 563 | 564 | .progress-fill.green { 565 | background-color: var(--keppei); 566 | width: 67%; 567 | } 568 | 569 | .progress-fill.yellow { 570 | background-color: var(--selective-yellow); 571 | width: 95%; 572 | } 573 | 574 | 575 | 576 | 577 | 578 | /*-----------------------------------*\ 579 | #COURSE 580 | \*-----------------------------------*/ 581 | 582 | .course .grid-list { 583 | padding-block: 20px 44px; 584 | } 585 | 586 | .course-card { 587 | border-block-end: 4px solid transparent; 588 | display: flex; 589 | flex-direction: column; 590 | gap: 24px; 591 | } 592 | 593 | .course-card:is(:hover, :focus-within) { 594 | border-color: var(--light-coral); 595 | } 596 | 597 | .course-card .card-banner { 598 | height: 160px; 599 | background-color: var(--light-gray); 600 | overflow: hidden; 601 | border-radius: var(--radius-4); 602 | } 603 | 604 | .course-card :is(.wrapper, .rating-wrapper) { 605 | display: flex; 606 | align-items: center; 607 | } 608 | 609 | .course-card .wrapper { 610 | justify-content: space-between; 611 | gap: 16px; 612 | } 613 | 614 | .course-card .card-price { 615 | color: var(--light-coral); 616 | } 617 | 618 | .course-card .rating-wrapper { 619 | gap: 4px; 620 | } 621 | 622 | .course-card .card-title { 623 | margin-block: 8px 16px; 624 | } 625 | 626 | .course-card .card-meta { 627 | justify-content: flex-start; 628 | } 629 | 630 | .course-card .card-meta .title-sm { 631 | display: flex; 632 | gap: 8px; 633 | } 634 | 635 | .course .btn { 636 | margin-inline: auto; 637 | } 638 | 639 | 640 | 641 | 642 | 643 | /*-----------------------------------*\ 644 | #CTA 645 | \*-----------------------------------*/ 646 | 647 | .cta { 648 | background-color: var(--keppei); 649 | padding: 48px 24px; 650 | text-align: center; 651 | } 652 | 653 | .cta .headline-md { 654 | color: var(--white); 655 | } 656 | 657 | .cta .btn { 658 | margin-inline: auto; 659 | } 660 | 661 | 662 | 663 | 664 | 665 | /*-----------------------------------*\ 666 | #FOOTER 667 | \*-----------------------------------*/ 668 | 669 | .footer-top .container { 670 | display: grid; 671 | gap: 24px; 672 | } 673 | 674 | .footer-text { 675 | margin-block: 40px 32px; 676 | } 677 | 678 | .social-list { 679 | display: flex; 680 | gap: 16px; 681 | } 682 | 683 | .footer-list-title { 684 | margin-block-end: 32px; 685 | } 686 | 687 | .footer-link { 688 | margin-block-start: 16px; 689 | } 690 | 691 | .footer-top .grid-list { 692 | grid-template-columns: repeat(3, 1fr); 693 | gap: 16px; 694 | } 695 | 696 | .footer-top .grid-list .img-cover { 697 | border-radius: var(--radius-6); 698 | } 699 | 700 | .footer-bottom { 701 | padding-block: 32px; 702 | text-align: center; 703 | border-block-start: 1px solid var(--black_10); 704 | } 705 | 706 | .copyright { 707 | font-weight: var(--fw-500); 708 | } 709 | 710 | 711 | 712 | 713 | 714 | /*-----------------------------------*\ 715 | #CONTAINER QUERIES 716 | \*-----------------------------------*/ 717 | 718 | /** 719 | * container query for card 720 | */ 721 | 722 | .card-container { 723 | container-type: inline-size; 724 | } 725 | 726 | @container (min-width: 500px) { 727 | 728 | .course-card { 729 | flex-direction: row; 730 | } 731 | 732 | .course-card .card-banner { 733 | width: 160px; 734 | flex-shrink: 0; 735 | } 736 | 737 | } 738 | 739 | 740 | 741 | 742 | 743 | /*-----------------------------------*\ 744 | #MEDIA QUERIES 745 | \*-----------------------------------*/ 746 | 747 | /** 748 | * responsive for large than 575px screen 749 | */ 750 | 751 | @media (min-width: 575px) { 752 | 753 | /** 754 | * REUSED STYLE 755 | */ 756 | 757 | .container { 758 | max-width: 640px; 759 | width: 100%; 760 | margin-inline: auto; 761 | } 762 | 763 | .card { 764 | padding: 32px; 765 | } 766 | 767 | 768 | 769 | /** 770 | * FOOTER 771 | */ 772 | 773 | .footer-top .container { 774 | grid-template-columns: 1fr 1fr; 775 | } 776 | 777 | } 778 | 779 | 780 | 781 | 782 | 783 | /** 784 | * responsive for large than 768px screen 785 | */ 786 | 787 | @media (min-width: 768px) { 788 | 789 | /** 790 | * CUSTOM PROPERTY 791 | */ 792 | 793 | :root { 794 | 795 | /** 796 | * typography 797 | */ 798 | 799 | --headline-lg: 6rem; 800 | --headline-md: 3.8rem; 801 | 802 | /** 803 | * spacing 804 | */ 805 | 806 | --section-padding: 80px; 807 | 808 | } 809 | 810 | 811 | 812 | /** 813 | * REUSED STYLE 814 | */ 815 | 816 | .container { 817 | max-width: 768px; 818 | } 819 | 820 | .grid-list { 821 | grid-template-columns: 1fr 1fr; 822 | } 823 | 824 | 825 | 826 | /** 827 | * CTA 828 | */ 829 | 830 | .cta { 831 | padding-block: 78px; 832 | } 833 | 834 | } 835 | 836 | 837 | 838 | 839 | 840 | /** 841 | * responsive for large than 992px screen 842 | */ 843 | 844 | @media (min-width: 992px) { 845 | 846 | :root { 847 | 848 | /** 849 | * typography 850 | */ 851 | 852 | --headline-lg: 7.7rem; 853 | --headline-md: 4.4rem; 854 | 855 | /** 856 | * spacing 857 | */ 858 | 859 | --section-padding: 120px; 860 | 861 | } 862 | 863 | 864 | 865 | /** 866 | * REUSED STYLE 867 | */ 868 | 869 | .container { 870 | max-width: 1024px; 871 | } 872 | 873 | .btn { 874 | padding: 16px 32px; 875 | font-size: 1.8rem; 876 | } 877 | 878 | 879 | 880 | /** 881 | * HEADER 882 | */ 883 | 884 | .nav-open-btn, 885 | .overlay, 886 | .navbar-top { 887 | display: none; 888 | } 889 | 890 | .navbar, 891 | .navbar.active { 892 | all: unset; 893 | display: block; 894 | } 895 | 896 | .navbar-list { 897 | display: flex; 898 | gap: 8px; 899 | } 900 | 901 | .navbar-item:not(:last-child) { 902 | border-block-end: none; 903 | } 904 | 905 | .navbar-link { 906 | padding: 8px 16px; 907 | } 908 | 909 | .header .btn { 910 | display: block; 911 | box-shadow: none; 912 | } 913 | 914 | 915 | 916 | /** 917 | * CATEGORY 918 | */ 919 | 920 | .grid-list { 921 | grid-template-columns: repeat(3, 1fr); 922 | } 923 | 924 | 925 | 926 | /** 927 | * ABOUT 928 | */ 929 | 930 | .about .container { 931 | grid-template-columns: 1fr 1fr; 932 | } 933 | 934 | 935 | 936 | /** 937 | * COURSE 938 | */ 939 | 940 | .course .grid-list { 941 | grid-template-columns: 1fr 1fr; 942 | margin-block: 40px 48px; 943 | } 944 | 945 | 946 | 947 | /** 948 | * FOOTER 949 | */ 950 | 951 | .footer-top .container { 952 | grid-template-columns: 1fr 0.5fr 0.5fr 0.8fr; 953 | } 954 | 955 | .footer-brand { 956 | padding-inline-end: 24px; 957 | } 958 | 959 | } 960 | 961 | 962 | 963 | 964 | 965 | /** 966 | * responsive for large than 1200px screen 967 | */ 968 | 969 | @media (min-width: 1200px) { 970 | 971 | /** 972 | * REUSED STYE 973 | */ 974 | 975 | .container { 976 | max-width: 1170px; 977 | } 978 | 979 | 980 | 981 | /** 982 | * HERO 983 | */ 984 | 985 | .hero-banner { 986 | display: block; 987 | max-width: max-content; 988 | margin-inline-end: -14%; 989 | } 990 | 991 | .hero .container { 992 | display: grid; 993 | grid-template-columns: 1fr 0.9fr; 994 | gap: 48px; 995 | } 996 | 997 | .hero .title-md { 998 | margin-block: 40px 60px; 999 | } 1000 | 1001 | 1002 | 1003 | /** 1004 | * ABOUT 1005 | */ 1006 | 1007 | .about .container { 1008 | grid-template-columns: 1fr 0.7fr; 1009 | } 1010 | 1011 | 1012 | 1013 | /** 1014 | * CTA 1015 | */ 1016 | 1017 | .cta { 1018 | text-align: left; 1019 | } 1020 | 1021 | .cta .container { 1022 | display: flex; 1023 | justify-content: space-between; 1024 | align-items: center; 1025 | } 1026 | 1027 | .cta .headline-md { 1028 | max-width: 22ch; 1029 | } 1030 | 1031 | .cta .btn { 1032 | margin-inline: 0; 1033 | } 1034 | 1035 | 1036 | 1037 | /** 1038 | * FOOTER 1039 | */ 1040 | 1041 | .footer .container { 1042 | gap: 48px; 1043 | } 1044 | 1045 | } -------------------------------------------------------------------------------- /assets/font/font.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #font.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 codewithsadee 7 | */ 8 | 9 | 10 | 11 | @font-face { 12 | font-family: "Gilroy" sans-serif; 13 | font-weight: 400; 14 | font-style: normal; 15 | font-display: swap; 16 | src: local("Gilroy-Regular"), 17 | url("./gilroy/Gilroy-Regular.woff2") format("woff2"); 18 | } 19 | 20 | @font-face { 21 | font-family: "Gilroy" sans-serif; 22 | font-weight: 500; 23 | font-style: normal; 24 | font-display: swap; 25 | src: local("Gilroy-Medium"), 26 | url("./gilroy/Gilroy-Medium.woff2") format("woff2"); 27 | } 28 | 29 | @font-face { 30 | font-family: "Gilroy" sans-serif; 31 | font-weight: 600; 32 | font-style: normal; 33 | font-display: swap; 34 | src: local("Gilroy-Bold"), 35 | url("./gilroy/Gilroy-Bold.woff2") format("woff2"); 36 | } 37 | 38 | @font-face { 39 | font-family: "Gilroy" sans-serif; 40 | font-weight: 700; 41 | font-style: normal; 42 | font-display: swap; 43 | src: local("Gilroy-ExtraBold"), 44 | url("./gilroy/Gilroy-ExtraBold.woff2") format("woff2"); 45 | } -------------------------------------------------------------------------------- /assets/font/gilroy/Gilroy-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/font/gilroy/Gilroy-Bold.woff2 -------------------------------------------------------------------------------- /assets/font/gilroy/Gilroy-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/font/gilroy/Gilroy-ExtraBold.woff2 -------------------------------------------------------------------------------- /assets/font/gilroy/Gilroy-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/font/gilroy/Gilroy-Light.woff2 -------------------------------------------------------------------------------- /assets/font/gilroy/Gilroy-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/font/gilroy/Gilroy-Medium.woff2 -------------------------------------------------------------------------------- /assets/font/gilroy/Gilroy-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/font/gilroy/Gilroy-Regular.woff2 -------------------------------------------------------------------------------- /assets/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/Thumbs.db -------------------------------------------------------------------------------- /assets/images/about-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/about-banner.png -------------------------------------------------------------------------------- /assets/images/category-1.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 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /assets/images/category-2.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 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | -------------------------------------------------------------------------------- /assets/images/category-3.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 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | -------------------------------------------------------------------------------- /assets/images/category-4.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 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /assets/images/category-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 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /assets/images/category-6.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 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /assets/images/category-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/category-bg.png -------------------------------------------------------------------------------- /assets/images/course-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/course-1.png -------------------------------------------------------------------------------- /assets/images/course-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/course-2.png -------------------------------------------------------------------------------- /assets/images/course-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/course-3.png -------------------------------------------------------------------------------- /assets/images/course-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/course-4.png -------------------------------------------------------------------------------- /assets/images/course-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/course-5.png -------------------------------------------------------------------------------- /assets/images/course-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/course-6.png -------------------------------------------------------------------------------- /assets/images/course-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/course-bg.png -------------------------------------------------------------------------------- /assets/images/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/file-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/images/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/footer-bg.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/hero-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/hero-bg.png -------------------------------------------------------------------------------- /assets/images/ins-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/ins-1.png -------------------------------------------------------------------------------- /assets/images/ins-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/ins-2.png -------------------------------------------------------------------------------- /assets/images/ins-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/ins-3.png -------------------------------------------------------------------------------- /assets/images/ins-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/ins-4.png -------------------------------------------------------------------------------- /assets/images/ins-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/ins-5.png -------------------------------------------------------------------------------- /assets/images/ins-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/LEARNING-WEB/892f221314722e491dc3e5b6d51f279cc72790d4/assets/images/ins-6.png -------------------------------------------------------------------------------- /assets/images/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/images/line-shape.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 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /assets/images/logo-footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/images/pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/star-fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/user-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * add eventListener on multiple elements 7 | */ 8 | 9 | const addEventOnElements = function (elements, eventType, callback) { 10 | for (let i = 0, len = elements.length; i < len; i++) { 11 | elements[i].addEventListener(eventType, callback); 12 | } 13 | } 14 | 15 | 16 | 17 | /** 18 | * PRELOADER 19 | */ 20 | 21 | const preloader = document.querySelector("[data-preloader]"); 22 | const circle = document.querySelector("[data-circle]"); 23 | 24 | window.addEventListener("load", function () { 25 | preloader.classList.add("loaded"); 26 | circle.style.animation = "none"; 27 | document.body.classList.add("loaded"); 28 | }); 29 | 30 | 31 | 32 | /** 33 | * NAVBAR TOGGLER FOR MOBILE 34 | */ 35 | 36 | const navbar = document.querySelector("[data-navbar]"); 37 | const navTogglers = document.querySelectorAll("[data-nav-toggler]"); 38 | const overlay = document.querySelector("[data-overlay]"); 39 | 40 | const toggleNavbar = function () { 41 | navbar.classList.toggle("active"); 42 | overlay.classList.toggle("active"); 43 | document.body.classList.toggle("nav-active"); 44 | } 45 | 46 | addEventOnElements(navTogglers, "click", toggleNavbar); 47 | 48 | 49 | 50 | /** 51 | * HEADER 52 | * 53 | * add active class on header when window scroll down to 100px 54 | */ 55 | 56 | const header = document.querySelector("[data-header]"); 57 | 58 | const headerActive = function () { 59 | if (window.scrollY > 100) { 60 | header.classList.add("active"); 61 | } else { 62 | header.classList.remove("active"); 63 | } 64 | } 65 | 66 | window.addEventListener("scroll", headerActive); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | LearnXpert 13 | 14 | 15 | 16 | 19 | 20 | 21 | 24 | 25 | 26 | 29 | 30 | 31 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 44 | 45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 | 53 | 56 | 57 |
58 |
59 | 60 | 63 | 64 | 97 | 98 | Start Free Trial 99 | 100 | 103 | 104 |
105 | 106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 |
114 |
115 | 116 | 119 | 120 |
122 |
123 | 124 |
125 | 126 |

127 | Better Learning Future Starts With Youdemi 128 |

129 | 130 |

131 | It is long established fact that reader distracted by the readable content. 132 |

133 | 134 |
135 | Get Started Now 136 | 137 | Get Started Now 138 |
139 | 140 |
141 | 142 |
143 | hero banner 144 |
145 | 146 |
147 |
148 | 149 | 150 | 151 | 152 | 153 | 156 | 157 |
159 |
160 | 161 |

Course Categories

162 | 163 |

164 | Browse Top Categories 165 |

166 | 167 |
    168 | 169 |
  • 170 |
    171 | 172 |
    173 | Data Science icon 175 |
    176 | 177 |
    178 |

    Data Science

    179 | 180 |

    68 Courses

    181 |
    182 | 183 | 184 | 185 |
    186 |
    • 187 | 188 |
  • 189 |
    190 | 191 |
    192 | UI/UX Design icon 194 |
    195 | 196 |
    197 |

    UI/UX Design

    198 | 199 |

    68 Courses

    200 |
    201 | 202 | 203 | 204 |
    205 |
    • 206 | 207 |
  • 208 |
    209 | 210 |
    211 | Modern Physics icon 213 |
    214 | 215 |
    216 |

    Modern Physics

    217 | 218 |

    68 Courses

    219 |
    220 | 221 | 222 | 223 |
    224 |
    • 225 | 226 |
  • 227 |
    228 | 229 |
    230 | Music Production icon 232 |
    233 | 234 |
    235 |

    Music Production

    236 | 237 |

    68 Courses

    238 |
    239 | 240 | 241 | 242 |
    243 |
    • 244 | 245 |
  • 246 |
    247 | 248 |
    249 | Data Science icon 251 |
    252 | 253 |
    254 |

    Data Science

    255 | 256 |

    68 Courses

    257 |
    258 | 259 | 260 | 261 |
    262 |
    • 263 | 264 |
  • 265 |
    266 | 267 |
    268 | Finances icon 269 |
    270 | 271 |
    272 |

    Finances

    273 | 274 |

    68 Courses

    275 |
    276 | 277 | 278 | 279 |
    280 |
    • 281 | 282 |
283 | 284 | View All Categories 285 | 286 |
287 |
288 | 289 | 290 | 291 | 292 | 293 | 296 | 297 |
298 |
299 | 300 |
301 | about banner 303 |
304 | 305 |
306 | 307 |

About Youdemi

308 | 309 |

310 | We Provide The Best Online Education 311 |

312 | 313 |

314 | There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration 315 | in some form, by injected humour. 316 |

317 | 318 |
    319 | 320 |
  • 321 |
    322 |

    Business Studies

    323 | 324 |

    86%

    325 |
    326 | 327 |
    328 |
    329 |
    330 |
    • 331 | 332 |
  • 333 |
    334 |

    Marketing

    335 | 336 |

    67%

    337 |
    338 | 339 |
    340 |
    341 |
    342 |
    • 343 | 344 |
  • 345 |
    346 |

    Design & Development

    347 | 348 |

    95%

    349 |
    350 | 351 |
    352 |
    353 |
    354 |
    • 355 | 356 |
357 | 358 |
359 | 360 |
361 |
362 | 363 | 364 | 365 | 366 | 367 | 370 | 371 |
373 |
374 | 375 |

Featured Courses

376 | 377 |

378 | Choose Unlimited Courses 379 |

380 | 381 |
    382 | 383 |
  • 384 |
    385 | 386 |
    387 | Basic Fundamentals of Interior & Graphics Design 389 |
    390 | 391 |
    392 | 393 |
    394 | 395 |

    $29.28

    396 | 397 |
    398 | 399 | 400 | 401 | 402 |
    403 | 404 |
    405 | 406 |

    407 | Basic Fundamentals of Interior & Graphics Design 408 |

    409 | 410 |
    411 | 412 |

    413 | 414 | 415 | 2 Lessons 416 |

    417 | 418 |

    419 | 420 | 421 | 4k Students 422 |

    423 | 424 |
    425 | 426 |
    427 | 428 | 430 | 431 |
    432 |
    • 433 | 434 |
  • 435 |
    436 | 437 |
    438 | Increasing Engagement with Instagram & Facebook 440 |
    441 | 442 |
    443 | 444 |
    445 | 446 |

    Free

    447 | 448 |
    449 | 450 | 451 | 452 | 453 |
    454 | 455 |
    456 | 457 |

    458 | Increasing Engagement with Instagram & Facebook 459 |

    460 | 461 |
    462 | 463 |

    464 | 465 | 466 | 2 Lessons 467 |

    468 | 469 |

    470 | 471 | 472 | 4k Students 473 |

    474 | 475 |
    476 | 477 |
    478 | 479 | 481 | 482 |
    483 |
    • 484 | 485 |
  • 486 |
    487 | 488 |
    489 | Introduction to Color Theory & Basic UI/UX 491 |
    492 | 493 |
    494 | 495 |
    496 | 497 |

    $72.39

    498 | 499 |
    500 | 501 | 502 | 503 | 504 |
    505 | 506 |
    507 | 508 |

    509 | Introduction to Color Theory & Basic UI/UX 510 |

    511 | 512 |
    513 | 514 |

    515 | 516 | 517 | 2 Lessons 518 |

    519 | 520 |

    521 | 522 | 523 | 4k Students 524 |

    525 | 526 |
    527 | 528 |
    529 | 530 | 532 | 533 |
    534 |
    • 535 | 536 |
  • 537 |
    538 | 539 |
    540 | Financial Security Thinking and Principles Theory 542 |
    543 | 544 |
    545 | 546 |
    547 | 548 |

    $72.39

    549 | 550 |
    551 | 552 | 553 | 554 | 555 |
    556 | 557 |
    558 | 559 |

    560 | Financial Security Thinking and Principles Theory 561 |

    562 | 563 |
    564 | 565 |

    566 | 567 | 568 | 2 Lessons 569 |

    570 | 571 |

    572 | 573 | 574 | 4k Students 575 |

    576 | 577 |
    578 | 579 |
    580 | 581 | 583 | 584 |
    585 |
    • 586 | 587 |
  • 588 |
    589 | 590 |
    591 | Logo Design: From Concept to Presentation 593 |
    594 | 595 |
    596 | 597 |
    598 | 599 |

    Free

    600 | 601 |
    602 | 603 | 604 | 605 | 606 |
    607 | 608 |
    609 | 610 |

    611 | Logo Design: From Concept to Presentation 612 |

    613 | 614 |
    615 | 616 |

    617 | 618 | 619 | 2 Lessons 620 |

    621 | 622 |

    623 | 624 | 625 | 4k Students 626 |

    627 | 628 |
    629 | 630 |
    631 | 632 | 634 | 635 |
    636 |
    • 637 | 638 |
  • 639 |
    640 | 641 |
    642 | Professional Ceramic Moulding for Beginners 644 |
    645 | 646 |
    647 | 648 |
    649 | 650 |

    $29.82

    651 | 652 |
    653 | 654 | 655 | 656 | 657 |
    658 | 659 |
    660 | 661 |

    662 | Professional Ceramic Moulding for Beginners 663 |

    664 | 665 |
    666 | 667 |

    668 | 669 | 670 | 2 Lessons 671 |

    672 | 673 |

    674 | 675 | 676 | 4k Students 677 |

    678 | 679 |
    680 | 681 |
    682 | 683 | 685 | 686 |
    687 |
    • 688 | 689 |
690 | 691 | View All Courses 692 | 693 |
694 |
695 | 696 | 697 | 698 | 699 | 700 | 703 | 704 |
705 |
706 | 707 |

708 | Education Is About Creating Leaders For Tomorrow 709 |

710 | 711 | Register Today 712 | 713 |
714 |
715 | 716 |
717 |
718 | 719 | 720 | 721 | 722 | 723 | 726 | 727 | 895 | 896 | 897 | 898 | 899 | 900 | 903 | 904 | 905 | 908 | 909 | 910 | 911 | 912 | 913 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Ionicon 6 | 7 | ``` html 8 | 9 | 10 | ``` 11 | 12 | ## Colors 13 | 14 | ``` css 15 | --selective-yellow: hsl(42, 100%, 56%); 16 | --roman-silver: hsl(240, 6%, 51%); 17 | --roman-silver_10: hsla(240, 6%, 51%, 0.1); 18 | --light-coral: hsl(357, 100%, 75%); 19 | --oxford-blue: hsl(224, 53%, 10%); 20 | --light-gray: hsl(0, 0%, 80%); 21 | --keppei: hsl(173, 60%, 47%); 22 | --white: hsl(0, 0%, 100%); 23 | --black: hsl(0, 0%, 0%); 24 | --black_10: hsla(0, 0%, 0%, 0.1); 25 | ``` 26 | 27 | ## Typography 28 | 29 | ``` css 30 | --ff-gilroy: "Gilroy", sans-serif; 31 | 32 | --headline-lg: 4.8rem; 33 | --headline-md: 3rem; 34 | --headline-sm: 2.4rem; 35 | --title-lg: 2.2rem; 36 | --title-md: 2rem; 37 | --title-sm: 1.8rem; 38 | 39 | --fw-500: 500; 40 | --fw-600: 600; 41 | --fw-700: 700; 42 | ``` 43 | 44 | ## Spacing 45 | 46 | ``` css 47 | --section-padding: 56px; 48 | ``` 49 | 50 | ## Shadow 51 | 52 | ``` css 53 | --shadow-1: 0px 35px 65px -10px hsla(0, 0%, 0%, 0.05); 54 | --shadow-2: 0 10px 40px hsla(0, 0%, 0%, 0.06); 55 | ``` 56 | 57 | ## Border Radius 58 | 59 | ``` css 60 | --radius-4: 4px; 61 | --radius-6: 6px; 62 | --radius-8: 8px; 63 | --radius-circle: 50%; 64 | ``` 65 | 66 | ## Transition 67 | 68 | ``` css 69 | --transition: 0.25s ease; 70 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 71 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); 72 | ``` 73 | --------------------------------------------------------------------------------