├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── Thumbs.db │ ├── about-banner.jpg │ ├── about-shape-1.svg │ ├── about-shape-2.svg │ ├── about-shape-3.png │ ├── about-shape-4.svg │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── blog-bg.svg │ ├── blog-shape.png │ ├── category-1.svg │ ├── category-2.svg │ ├── category-3.svg │ ├── category-4.svg │ ├── course-1.jpg │ ├── course-2.jpg │ ├── course-3.jpg │ ├── footer-bg.png │ ├── hero-banner-1.jpg │ ├── hero-banner-2.jpg │ ├── hero-bg.svg │ ├── hero-shape-1.svg │ ├── hero-shape-2.png │ ├── logo-light.svg │ ├── logo.svg │ ├── video-banner.jpg │ ├── video-bg.png │ ├── video-shape-1.png │ └── video-shape-2.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/eduweb) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/eduweb?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/eduweb?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/x26bQPxcFX4?style=social)](https://youtu.be/x26bQPxcFX4) 8 | 9 |
10 |
11 | 12 |

eduweb - Education Website

13 | 14 | EduWeb is a fully responsive education 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 | ![EduWeb 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 **EduWeb** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/eduweb.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/eduweb.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 | --selective-yellow: hsl(42, 94%, 55%); 24 | --eerie-black-1: hsl(0, 0%, 9%); 25 | --eerie-black-2: hsl(180, 3%, 7%); 26 | --quick-silver: hsl(0, 0%, 65%); 27 | --radical-red: hsl(351, 83%, 61%); 28 | --light-gray: hsl(0, 0%, 80%); 29 | --isabelline: hsl(36, 33%, 94%); 30 | --gray-x-11: hsl(0, 0%, 73%); 31 | --kappel_15: hsla(170, 75%, 41%, 0.15); 32 | --platinum: hsl(0, 0%, 90%); 33 | --gray-web: hsl(0, 0%, 50%); 34 | --black_80: hsla(0, 0%, 0%, 0.8); 35 | --white_50: hsla(0, 0%, 100%, 0.5); 36 | --black_50: hsla(0, 0%, 0%, 0.5); 37 | --black_30: hsla(0, 0%, 0%, 0.3); 38 | --kappel: hsl(170, 75%, 41%); 39 | --white: hsl(0, 0%, 100%); 40 | 41 | /** 42 | * gradient color 43 | */ 44 | 45 | --gradient: linear-gradient(-90deg,hsl(151, 58%, 46%) 0%,hsl(170, 75%, 41%) 100%); 46 | 47 | /** 48 | * typography 49 | */ 50 | 51 | --ff-league_spartan: 'League Spartan', sans-serif; 52 | --ff-poppins: 'Poppins', sans-serif; 53 | 54 | --fs-1: 4.2rem; 55 | --fs-2: 3.2rem; 56 | --fs-3: 2.3rem; 57 | --fs-4: 1.8rem; 58 | --fs-5: 1.5rem; 59 | --fs-6: 1.4rem; 60 | --fs-7: 1.3rem; 61 | 62 | --fw-500: 500; 63 | --fw-600: 600; 64 | 65 | /** 66 | * spacing 67 | */ 68 | 69 | --section-padding: 75px; 70 | 71 | /** 72 | * shadow 73 | */ 74 | 75 | --shadow-1: 0 6px 15px 0 hsla(0, 0%, 0%, 0.05); 76 | --shadow-2: 0 10px 30px hsla(0, 0%, 0%, 0.06); 77 | --shadow-3: 0 10px 50px 0 hsla(220, 53%, 22%, 0.1); 78 | 79 | /** 80 | * radius 81 | */ 82 | 83 | --radius-pill: 500px; 84 | --radius-circle: 50%; 85 | --radius-3: 3px; 86 | --radius-5: 5px; 87 | --radius-10: 10px; 88 | 89 | /** 90 | * transition 91 | */ 92 | 93 | --transition-1: 0.25s ease; 94 | --transition-2: 0.5s ease; 95 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 96 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 97 | 98 | } 99 | 100 | 101 | 102 | 103 | 104 | /*-----------------------------------*\ 105 | #RESET 106 | \*-----------------------------------*/ 107 | 108 | *, 109 | *::before, 110 | *::after { 111 | margin: 0; 112 | padding: 0; 113 | box-sizing: border-box; 114 | } 115 | 116 | li { list-style: none; } 117 | 118 | a, 119 | img, 120 | span, 121 | data, 122 | input, 123 | button, 124 | ion-icon { display: block; } 125 | 126 | a { 127 | color: inherit; 128 | text-decoration: none; 129 | } 130 | 131 | img { height: auto; } 132 | 133 | input, 134 | button { 135 | background: none; 136 | border: none; 137 | font: inherit; 138 | } 139 | 140 | input { width: 100%; } 141 | 142 | button { cursor: pointer; } 143 | 144 | ion-icon { pointer-events: none; } 145 | 146 | address { font-style: normal; } 147 | 148 | html { 149 | font-family: var(--ff-poppins); 150 | font-size: 10px; 151 | scroll-behavior: smooth; 152 | } 153 | 154 | body { 155 | background-color: var(--white); 156 | color: var(--gray-web); 157 | font-size: 1.6rem; 158 | line-height: 1.75; 159 | } 160 | 161 | :focus-visible { outline-offset: 4px; } 162 | 163 | ::-webkit-scrollbar { width: 10px; } 164 | 165 | ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); } 166 | 167 | ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); } 168 | 169 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); } 170 | 171 | 172 | 173 | 174 | 175 | /*-----------------------------------*\ 176 | #REUSED STYLE 177 | \*-----------------------------------*/ 178 | 179 | .container { padding-inline: 15px; } 180 | 181 | .section { padding-block: var(--section-padding); } 182 | 183 | .shape { 184 | position: absolute; 185 | display: none; 186 | } 187 | 188 | .has-bg-image { 189 | background-repeat: no-repeat; 190 | background-size: cover; 191 | background-position: center; 192 | } 193 | 194 | .h1, 195 | .h2, 196 | .h3 { 197 | color: var(--eerie-black-1); 198 | font-family: var(--ff-league_spartan); 199 | line-height: 1; 200 | } 201 | 202 | .h1, 203 | .h2 { font-weight: var(--fw-600); } 204 | 205 | .h1 { font-size: var(--fs-1); } 206 | 207 | .h2 { font-size: var(--fs-2); } 208 | 209 | .h3 { 210 | font-size: var(--fs-3); 211 | font-weight: var(--fw-500); 212 | } 213 | 214 | .section-title { 215 | --color: var(--radical-red); 216 | text-align: center; 217 | } 218 | 219 | .section-title .span { 220 | display: inline-block; 221 | color: var(--color); 222 | } 223 | 224 | .btn { 225 | background-color: var(--kappel); 226 | color: var(--white); 227 | font-family: var(--ff-league_spartan); 228 | font-size: var(--fs-4); 229 | display: flex; 230 | align-items: center; 231 | gap: 7px; 232 | max-width: max-content; 233 | padding: 10px 20px; 234 | border-radius: var(--radius-5); 235 | overflow: hidden; 236 | } 237 | 238 | .has-before, 239 | .has-after { 240 | position: relative; 241 | z-index: 1; 242 | } 243 | 244 | .has-before::before, 245 | .has-after::after { 246 | position: absolute; 247 | content: ""; 248 | } 249 | 250 | .btn::before { 251 | inset: 0; 252 | background-image: var(--gradient); 253 | z-index: -1; 254 | border-radius: inherit; 255 | transform: translateX(-100%); 256 | transition: var(--transition-2); 257 | } 258 | 259 | .btn:is(:hover, :focus)::before { transform: translateX(0); } 260 | 261 | .img-holder { 262 | aspect-ratio: var(--width) / var(--height); 263 | background-color: var(--light-gray); 264 | overflow: hidden; 265 | } 266 | 267 | .img-cover { 268 | width: 100%; 269 | height: 100%; 270 | object-fit: cover; 271 | } 272 | 273 | .section-subtitle { 274 | font-size: var(--fs-5); 275 | text-transform: uppercase; 276 | font-weight: var(--fw-500); 277 | letter-spacing: 1px; 278 | text-align: center; 279 | margin-block-end: 15px; 280 | } 281 | 282 | .section-text { 283 | font-size: var(--fs-5); 284 | text-align: center; 285 | margin-block: 15px 25px; 286 | } 287 | 288 | .grid-list { 289 | display: grid; 290 | gap: 30px; 291 | } 292 | 293 | .category-card, 294 | .stats-card { background-color: hsla(var(--color), 0.1); } 295 | 296 | :is(.course, .blog) .section-title { margin-block-end: 40px; } 297 | 298 | 299 | 300 | 301 | 302 | /*-----------------------------------*\ 303 | #HEADER 304 | \*-----------------------------------*/ 305 | 306 | .header .btn { display: none; } 307 | 308 | .header { 309 | position: absolute; 310 | top: 0; 311 | left: 0; 312 | width: 100%; 313 | background-color: var(--white); 314 | padding-block: 12px; 315 | box-shadow: var(--shadow-1); 316 | z-index: 4; 317 | } 318 | 319 | .header.active { position: fixed; } 320 | 321 | .header .container, 322 | .header-actions, 323 | .navbar .wrapper { 324 | display: flex; 325 | justify-content: space-between; 326 | align-items: center; 327 | gap: 15px; 328 | } 329 | 330 | .header-action-btn, 331 | .nav-close-btn { 332 | position: relative; 333 | color: var(--eerie-black-1); 334 | font-size: 24px; 335 | transition: var(--transition-1); 336 | } 337 | 338 | .header-action-btn:is(:hover, :focus) { color: var(--kappel); } 339 | 340 | .header-action-btn .btn-badge { 341 | position: absolute; 342 | top: -10px; 343 | right: -10px; 344 | background-color: var(--kappel); 345 | color: var(--white); 346 | font-family: var(--ff-league_spartan); 347 | font-size: var(--fs-6); 348 | min-width: 20px; 349 | height: 20px; 350 | border-radius: var(--radius-circle); 351 | } 352 | 353 | .navbar { 354 | position: fixed; 355 | top: 0; 356 | left: -320px; 357 | background-color: var(--white); 358 | width: 100%; 359 | max-width: 320px; 360 | height: 100%; 361 | z-index: 2; 362 | transition: 0.25s var(--cubic-in); 363 | } 364 | 365 | .navbar.active { 366 | transform: translateX(320px); 367 | transition: 0.5s var(--cubic-out); 368 | } 369 | 370 | .navbar .wrapper { 371 | padding: 15px 20px; 372 | border-block-end: 1px solid var(--platinum); 373 | } 374 | 375 | .nav-close-btn { 376 | background-color: var(--white); 377 | box-shadow: var(--shadow-2); 378 | padding: 8px; 379 | border-radius: var(--radius-circle); 380 | } 381 | 382 | .nav-close-btn:is(:hover, :focus) { 383 | background-color: var(--kappel); 384 | color: var(--white); 385 | } 386 | 387 | .navbar-list { padding: 15px 20px; } 388 | 389 | .navbar-item:not(:last-child) { border-block-end: 1px solid var(--platinum); } 390 | 391 | .navbar-link { 392 | padding-block: 8px; 393 | font-weight: var(--fw-500); 394 | transition: var(--transition-1); 395 | } 396 | 397 | .navbar-link:is(:hover, :focus) { color: var(--kappel); } 398 | 399 | .overlay { 400 | position: fixed; 401 | inset: 0; 402 | background-color: var(--black_80); 403 | pointer-events: none; 404 | opacity: 0; 405 | z-index: 1; 406 | transition: var(--transition-1); 407 | } 408 | 409 | .overlay.active { 410 | opacity: 1; 411 | pointer-events: all; 412 | } 413 | 414 | 415 | 416 | 417 | 418 | /*-----------------------------------*\ 419 | #HERO 420 | \*-----------------------------------*/ 421 | 422 | .hero { padding-block-start: calc(var(--section-padding) + 80px); } 423 | 424 | .hero .container { 425 | display: grid; 426 | gap: 40px; 427 | } 428 | 429 | .hero-text { 430 | color: var(--eerie-black-1); 431 | font-size: var(--fs-4); 432 | text-align: center; 433 | margin-block: 18px 20px; 434 | } 435 | 436 | .hero .btn { margin-inline: auto; } 437 | 438 | .hero-banner { 439 | display: grid; 440 | grid-template-columns: 1fr 0.8fr; 441 | align-items: flex-start; 442 | gap: 30px; 443 | } 444 | 445 | .hero-banner .img-holder.one { 446 | border-top-right-radius: 70px; 447 | border-bottom-left-radius: 110px; 448 | } 449 | 450 | .hero-banner .img-holder.two { 451 | border-top-left-radius: 50px; 452 | border-bottom-right-radius: 90px; 453 | } 454 | 455 | 456 | 457 | 458 | 459 | /*-----------------------------------*\ 460 | #CATEGORY 461 | \*-----------------------------------*/ 462 | 463 | .category .section-subtitle { color: var(--radical-red); } 464 | 465 | .category .section-title { --color: var(--kappel); } 466 | 467 | .category .section-text { margin-block-end: 40px; } 468 | 469 | .category-card { 470 | padding: 50px 30px; 471 | text-align: center; 472 | border-radius: var(--radius-5); 473 | } 474 | 475 | .category-card .card-icon { 476 | background-color: hsla(var(--color), 0.1); 477 | width: 80px; 478 | height: 80px; 479 | display: grid; 480 | place-items: center; 481 | border-radius: var(--radius-circle); 482 | margin-inline: auto; 483 | margin-block-end: 30px; 484 | } 485 | 486 | .category-card .card-text { 487 | color: var(--eerie-black-1); 488 | font-size: var(--fs-5); 489 | margin-block: 15px 25px; 490 | } 491 | 492 | .category-card .card-badge { 493 | background-color: hsla(var(--color), 0.1); 494 | color: hsl(var(--color)); 495 | font-size: var(--fs-5); 496 | font-weight: var(--fw-500); 497 | padding: 2px 18px; 498 | max-width: max-content; 499 | margin-inline: auto; 500 | border-radius: var(--radius-5); 501 | } 502 | 503 | 504 | 505 | 506 | 507 | /*-----------------------------------*\ 508 | #ABOUT 509 | \*-----------------------------------*/ 510 | 511 | .about { 512 | padding-block-start: 0; 513 | overflow: hidden; 514 | } 515 | 516 | .about .container { 517 | display: grid; 518 | gap: 30px; 519 | } 520 | 521 | .about-banner { 522 | position: relative; 523 | z-index: 1; 524 | } 525 | 526 | .about-banner .img-holder { border-radius: var(--radius-10); } 527 | 528 | .about-shape-2 { 529 | display: block; 530 | bottom: -100px; 531 | left: -60px; 532 | animation: bounce 2.5s infinite; 533 | } 534 | 535 | @keyframes bounce { 536 | 0%, 537 | 20%, 538 | 50%, 539 | 80%, 540 | 100% { transform: translateY(0); } 541 | 542 | 40% { transform: translateY(-30px); } 543 | 544 | 60% { transform: translateY(-15px); } 545 | } 546 | 547 | .about :is(.section-subtitle, .section-title, .section-text) { 548 | text-align: left; 549 | } 550 | 551 | .about-item { 552 | margin-block: 15px; 553 | display: flex; 554 | align-items: center; 555 | gap: 15px; 556 | } 557 | 558 | .about-item ion-icon { 559 | color: var(--selective-yellow); 560 | font-size: 20px; 561 | --ionicon-stroke-width: 50px; 562 | } 563 | 564 | .about-item .span { 565 | color: var(--eerie-black-1); 566 | font-family: var(--ff-league_spartan); 567 | } 568 | 569 | 570 | 571 | 572 | 573 | /*-----------------------------------*\ 574 | #COURSE 575 | \*-----------------------------------*/ 576 | 577 | .course { background-color: var(--isabelline); } 578 | 579 | .course-card { 580 | position: relative; 581 | background-color: var(--white); 582 | border-radius: var(--radius-5); 583 | overflow: hidden; 584 | } 585 | 586 | .course-card .img-cover { transition: var(--transition-2); } 587 | 588 | .course-card:is(:hover, :focus-within) .img-cover { transform: scale(1.1); } 589 | 590 | .course-card :is(.abs-badge, .badge) { 591 | font-family: var(--ff-league_spartan); 592 | border-radius: var(--radius-3); 593 | } 594 | 595 | .course-card .abs-badge { 596 | position: absolute; 597 | top: 10px; 598 | right: 10px; 599 | background-color: var(--selective-yellow); 600 | color: var(--white); 601 | display: flex; 602 | align-items: center; 603 | gap: 5px; 604 | line-height: 1; 605 | padding: 6px 8px; 606 | padding-block-end: 3px; 607 | } 608 | 609 | .course-card .abs-badge ion-icon { 610 | font-size: 18px; 611 | margin-block-end: 5px; 612 | --ionicon-stroke-width: 50px; 613 | } 614 | 615 | .course-card .card-content { padding: 25px; } 616 | 617 | .course-card .badge { 618 | background-color: var(--kappel_15); 619 | max-width: max-content; 620 | color: var(--kappel); 621 | line-height: 25px; 622 | padding-inline: 10px; 623 | } 624 | 625 | .course-card .card-title { 626 | display: -webkit-box; 627 | -webkit-box-orient: vertical; 628 | -webkit-line-clamp: 2; 629 | overflow: hidden; 630 | margin-block: 15px 8px; 631 | transition: var(--transition-1); 632 | } 633 | 634 | .course-card .card-title:is(:hover, :focus) { color: var(--kappel); } 635 | 636 | .course-card :is(.wrapper, .rating-wrapper, .card-meta-list, .card-meta-item) { 637 | display: flex; 638 | align-items: center; 639 | } 640 | 641 | .course-card .wrapper { gap: 10px; } 642 | 643 | .course-card .rating-wrapper { gap: 3px; } 644 | 645 | .course-card .rating-wrapper ion-icon { color: var(--selective-yellow); } 646 | 647 | .course-card .rating-text { 648 | color: var(--eerie-black-1); 649 | font-size: var(--fs-6); 650 | font-weight: var(--fw-500); 651 | } 652 | 653 | .course-card .price { 654 | color: var(--radical-red); 655 | font-family: var(--ff-league_spartan); 656 | font-size: var(--fs-4); 657 | font-weight: var(--fw-600); 658 | margin-block: 8px 15px; 659 | } 660 | 661 | .course-card .card-meta-list { flex-wrap: wrap; } 662 | 663 | .course-card .card-meta-item { 664 | position: relative; 665 | gap: 5px; 666 | } 667 | 668 | .course-card .card-meta-item:not(:last-child)::after { 669 | content: "|"; 670 | display: inline-block; 671 | color: var(--platinum); 672 | padding-inline: 10px; 673 | } 674 | 675 | .course-card .card-meta-item ion-icon { 676 | color: var(--quick-silver); 677 | --ionicon-stroke-width: 50px; 678 | } 679 | 680 | .course-card .card-meta-item .span { 681 | color: var(--eerie-black-1); 682 | font-size: var(--fs-7); 683 | } 684 | 685 | .course .btn { 686 | margin-inline: auto; 687 | margin-block-start: 60px; 688 | } 689 | 690 | 691 | 692 | 693 | 694 | /*-----------------------------------*\ 695 | #VIDEO 696 | \*-----------------------------------*/ 697 | 698 | .video { 699 | background-size: contain; 700 | background-position: center top; 701 | } 702 | 703 | .video-banner { 704 | position: relative; 705 | border-top-right-radius: 80px; 706 | border-bottom-left-radius: 120px; 707 | } 708 | 709 | .video .play-btn { 710 | position: absolute; 711 | top: 50%; 712 | left: 50%; 713 | transform: translate(-50%, -50%); 714 | background-color: var(--radical-red); 715 | font-size: 30px; 716 | padding: 16px; 717 | color: var(--white); 718 | border-radius: var(--radius-circle); 719 | box-shadow: 0 0 0 0 var(--white_50); 720 | z-index: 1; 721 | animation: pulse 3s ease infinite; 722 | } 723 | 724 | @keyframes pulse { 725 | 0% { box-shadow: 0 0 0 0 var(--white_50); } 726 | 100% { box-shadow: 0 0 0 20px transparent; } 727 | } 728 | 729 | .video-banner::after { 730 | inset: 0; 731 | background-color: var(--black_30); 732 | } 733 | 734 | 735 | 736 | 737 | 738 | /*-----------------------------------*\ 739 | #STATS 740 | \*-----------------------------------*/ 741 | 742 | .stats-card { 743 | text-align: center; 744 | padding: 25px; 745 | border-radius: var(--radius-10); 746 | } 747 | 748 | .stats-card :is(.card-title, .card-text) { font-family: var(--ff-league_spartan); } 749 | 750 | .stats-card .card-title { 751 | color: hsl(var(--color)); 752 | font-size: var(--fs-2); 753 | line-height: 1.1; 754 | } 755 | 756 | .stats-card .card-text { 757 | color: var(--eerie-black-1); 758 | text-transform: uppercase; 759 | } 760 | 761 | 762 | 763 | 764 | 765 | /*-----------------------------------*\ 766 | #BLOG 767 | \*-----------------------------------*/ 768 | 769 | .blog-card .card-banner { border-radius: var(--radius-10); } 770 | 771 | .blog-card .card-banner .img-cover { transition: var(--transition-2); } 772 | 773 | .blog-card .card-banner::after { 774 | inset: 0; 775 | background-color: var(--black_50); 776 | opacity: 0; 777 | transition: var(--transition-1); 778 | } 779 | 780 | .blog-card:is(:hover, :focus-within) .card-banner .img-cover { transform: scale(1.1); } 781 | 782 | .blog-card:is(:hover, :focus-within) .card-banner::after { opacity: 1; } 783 | 784 | .blog-card .card-content { 785 | position: relative; 786 | margin-inline: 15px; 787 | background-color: var(--white); 788 | padding: 20px; 789 | border-radius: var(--radius-10); 790 | box-shadow: var(--shadow-3); 791 | margin-block-start: -100px; 792 | z-index: 1; 793 | } 794 | 795 | .blog-card .card-btn { 796 | position: absolute; 797 | top: -40px; 798 | right: 30px; 799 | background-color: var(--kappel); 800 | color: var(--white); 801 | font-size: 20px; 802 | padding: 20px; 803 | border-radius: var(--radius-circle); 804 | transition: var(--transition-1); 805 | opacity: 0; 806 | } 807 | 808 | .blog-card .card-btn:is(:hover, :focus) { background-color: var(--radical-red); } 809 | 810 | .blog-card:is(:hover, :focus-within) .card-btn { 811 | opacity: 1; 812 | transform: translateY(10px); 813 | } 814 | 815 | .blog-card :is(.card-meta-item, .card-text, .card-subtitle) { 816 | font-size: var(--fs-5); 817 | } 818 | 819 | .blog-card .card-subtitle { text-transform: uppercase; } 820 | 821 | .blog-card .card-title { 822 | margin-block: 10px 15px; 823 | transition: var(--transition-1); 824 | } 825 | 826 | .blog-card .card-title:is(:hover, :focus) { color: var(--kappel); } 827 | 828 | .blog-card :is(.card-meta-list, .card-meta-item) { display: flex; } 829 | 830 | .blog-card .card-meta-list { 831 | flex-wrap: wrap; 832 | gap: 10px 20px; 833 | margin-block-end: 20px; 834 | } 835 | 836 | .blog-card .card-meta-item { 837 | gap: 10px; 838 | align-items: center; 839 | color: var(--eerie-black-1); 840 | } 841 | 842 | .blog-card .card-meta-item ion-icon { 843 | color: var(--kappel); 844 | font-size: 18px; 845 | --ionicon-stroke-width: 40px; 846 | } 847 | 848 | 849 | 850 | 851 | 852 | /*-----------------------------------*\ 853 | #FOOTER 854 | \*-----------------------------------*/ 855 | 856 | .footer { 857 | background-repeat: no-repeat; 858 | background-color: var(--eerie-black-2); 859 | color: var(--gray-x-11); 860 | font-size: var(--fs-5); 861 | } 862 | 863 | .footer-top { 864 | display: grid; 865 | gap: 30px; 866 | } 867 | 868 | .footer-brand-text { margin-block: 20px; } 869 | 870 | .footer-brand .wrapper { 871 | display: flex; 872 | gap: 5px; 873 | } 874 | 875 | .footer-brand .wrapper .span { font-weight: var(--fw-500); } 876 | 877 | .footer-link { transition: var(--transition-1); } 878 | 879 | .footer-link:is(:hover, :focus) { color: var(--kappel); } 880 | 881 | .footer-list-title { 882 | color: var(--white); 883 | font-family: var(--ff-league_spartan); 884 | font-size: var(--fs-3); 885 | font-weight: var(--fw-600); 886 | margin-block-end: 10px; 887 | } 888 | 889 | .footer-list .footer-link { padding-block: 5px; } 890 | 891 | .newsletter-form { margin-block: 20px 35px; } 892 | 893 | .newsletter-form .input-field { 894 | background-color: var(--white); 895 | padding: 12px; 896 | border-radius: var(--radius-5); 897 | margin-block-end: 20px; 898 | } 899 | 900 | .newsletter-form .btn { 901 | min-width: 100%; 902 | justify-content: center; 903 | } 904 | 905 | .social-list { 906 | display: flex; 907 | gap: 25px; 908 | } 909 | 910 | .social-link { font-size: 20px; } 911 | 912 | .footer-bottom { 913 | border-block-start: 1px solid var(--eerie-black-1); 914 | padding-block: 30px; 915 | } 916 | 917 | .copyright { text-align: center; } 918 | 919 | .copyright-link { 920 | color: var(--kappel); 921 | display: inline-block; 922 | } 923 | 924 | 925 | 926 | 927 | 928 | /*-----------------------------------*\ 929 | #BACK TO TOP 930 | \*-----------------------------------*/ 931 | 932 | .back-top-btn { 933 | position: fixed; 934 | bottom: 40px; 935 | right: 30px; 936 | background-color: var(--kappel); 937 | color: var(--white); 938 | font-size: 20px; 939 | padding: 15px; 940 | border-radius: var(--radius-circle); 941 | z-index: 3; 942 | opacity: 0; 943 | pointer-events: none; 944 | transition: var(--transition-1); 945 | } 946 | 947 | .back-top-btn.active { 948 | transform: translateY(10px); 949 | opacity: 1; 950 | pointer-events: all; 951 | } 952 | 953 | 954 | 955 | 956 | 957 | /*-----------------------------------*\ 958 | #MEDIA QUERIES 959 | \*-----------------------------------*/ 960 | 961 | /** 962 | * responsive for large than 575px screen 963 | */ 964 | 965 | @media (min-width: 575px) { 966 | 967 | /** 968 | * REUSED STYLE 969 | */ 970 | 971 | .container { 972 | max-width: 520px; 973 | width: 100%; 974 | margin-inline: auto; 975 | } 976 | 977 | .grid-list { grid-template-columns: 1fr 1fr; } 978 | 979 | :is(.course, .blog) .grid-list { grid-template-columns: 1fr; } 980 | 981 | 982 | 983 | /** 984 | * HEADER 985 | */ 986 | 987 | .header .container { max-width: unset; } 988 | 989 | .header-actions { gap: 30px; } 990 | 991 | 992 | 993 | /** 994 | * HERO 995 | */ 996 | 997 | .hero-banner { grid-template-columns: 1fr 0.9fr; } 998 | 999 | 1000 | 1001 | /** 1002 | * VIDEO 1003 | */ 1004 | 1005 | .video .play-btn { padding: 25px; } 1006 | 1007 | 1008 | 1009 | /** 1010 | * STATS 1011 | */ 1012 | 1013 | .stats-card { padding: 40px 30px; } 1014 | 1015 | 1016 | 1017 | /** 1018 | * FOOTER 1019 | */ 1020 | 1021 | .footer-brand, 1022 | .footer-list:last-child { grid-column: 1 / 3; } 1023 | 1024 | .newsletter-form { 1025 | display: flex; 1026 | align-items: center; 1027 | gap: 10px; 1028 | } 1029 | 1030 | .newsletter-form .input-field { margin-block-end: 0; } 1031 | 1032 | .newsletter-form .btn { min-width: max-content; } 1033 | 1034 | } 1035 | 1036 | 1037 | 1038 | 1039 | 1040 | /** 1041 | * responsive for large than 768px screen 1042 | */ 1043 | 1044 | @media (min-width: 768px) { 1045 | 1046 | /** 1047 | * CUSTOM PROPERTY 1048 | */ 1049 | 1050 | :root { 1051 | 1052 | /** 1053 | * typography 1054 | */ 1055 | 1056 | --fs-1: 4.6rem; 1057 | --fs-2: 3.8rem; 1058 | 1059 | } 1060 | 1061 | 1062 | 1063 | /** 1064 | * REUSED STYLE 1065 | */ 1066 | 1067 | .container { max-width: 720px; } 1068 | 1069 | .btn { padding: 15px 30px; } 1070 | 1071 | :is(.course, .blog) .grid-list { grid-template-columns: 1fr 1fr; } 1072 | 1073 | 1074 | 1075 | /** 1076 | * HEADER 1077 | */ 1078 | 1079 | .header .container { padding-inline: 30px; } 1080 | 1081 | .header .btn { 1082 | display: flex; 1083 | padding: 10px 30px; 1084 | margin-inline: 20px; 1085 | } 1086 | 1087 | 1088 | 1089 | /** 1090 | * HERO 1091 | */ 1092 | 1093 | .hero { padding-block-start: calc(var(--section-padding) + 90px); } 1094 | 1095 | .hero .container { gap: 50px; } 1096 | 1097 | .hero-text { margin-block-end: 30px; } 1098 | 1099 | .hero-banner { 1100 | position: relative; 1101 | z-index: 1; 1102 | } 1103 | 1104 | .hero-banner .img-holder { max-width: max-content; } 1105 | 1106 | .hero-banner .img-holder.one { justify-self: flex-end; } 1107 | 1108 | .hero-banner .img-holder.two { margin-block-start: 100px; } 1109 | 1110 | .hero-shape-1 { 1111 | display: block; 1112 | position: absolute; 1113 | bottom: -40px; 1114 | left: -10px; 1115 | } 1116 | 1117 | 1118 | 1119 | /** 1120 | * ABOUT 1121 | */ 1122 | 1123 | .about { padding-block-start: 50px; } 1124 | 1125 | .about-banner { 1126 | padding: 60px; 1127 | padding-inline-end: 0; 1128 | } 1129 | 1130 | .about-banner .img-holder { 1131 | max-width: max-content; 1132 | margin-inline: auto; 1133 | } 1134 | 1135 | .about-shape-1 { 1136 | display: block; 1137 | top: -40px; 1138 | right: -70px; 1139 | } 1140 | 1141 | 1142 | 1143 | /** 1144 | * FOOTER 1145 | */ 1146 | 1147 | .footer-brand, 1148 | .footer-list:last-child { grid-column: auto; } 1149 | 1150 | .newsletter-form .btn { padding-block: 10px; } 1151 | 1152 | } 1153 | 1154 | 1155 | 1156 | 1157 | 1158 | /** 1159 | * responsive for large than 992px screen 1160 | */ 1161 | 1162 | @media (min-width: 992px) { 1163 | 1164 | /** 1165 | * CUSTOM PROPERTY 1166 | */ 1167 | 1168 | :root { 1169 | 1170 | /** 1171 | * typography 1172 | */ 1173 | 1174 | --fs-1: 5.5rem; 1175 | --fs-2: 4.5rem; 1176 | 1177 | } 1178 | 1179 | 1180 | 1181 | /** 1182 | * REUSED STYLE 1183 | */ 1184 | 1185 | .container { max-width: 960px; } 1186 | 1187 | .grid-list { grid-template-columns: repeat(4, 1fr); } 1188 | 1189 | :is(.course, .blog) .grid-list { grid-template-columns: repeat(3, 1fr); } 1190 | 1191 | 1192 | 1193 | /** 1194 | * HERO 1195 | */ 1196 | 1197 | .hero .container { 1198 | grid-template-columns: 1fr 1fr; 1199 | align-items: center; 1200 | } 1201 | 1202 | .hero .section-title, 1203 | .hero-text { text-align: left; } 1204 | 1205 | .hero .btn { margin-inline: 0; } 1206 | 1207 | 1208 | 1209 | /** 1210 | * ABOUT 1211 | */ 1212 | 1213 | .about .container { 1214 | grid-template-columns: 1fr 0.6fr; 1215 | align-items: center; 1216 | gap: 60px; 1217 | } 1218 | 1219 | 1220 | 1221 | /** 1222 | * VIDEO 1223 | */ 1224 | 1225 | .video-banner { 1226 | max-width: 75%; 1227 | margin-inline: auto; 1228 | } 1229 | 1230 | 1231 | 1232 | /** 1233 | * FOOTER 1234 | */ 1235 | 1236 | .footer .grid-list { grid-template-columns: 1fr 0.6fr 0.6fr 1.2fr; } 1237 | 1238 | } 1239 | 1240 | 1241 | 1242 | 1243 | 1244 | /** 1245 | * responsive for large than 1200px screen 1246 | */ 1247 | 1248 | @media (min-width: 1200px) { 1249 | 1250 | /** 1251 | * CUSTOM PROPERTY 1252 | */ 1253 | 1254 | :root { 1255 | 1256 | /** 1257 | * typography 1258 | */ 1259 | 1260 | --fs-1: 6.5rem; 1261 | 1262 | /** 1263 | * spacing 1264 | */ 1265 | 1266 | --section-padding: 120px; 1267 | 1268 | } 1269 | 1270 | 1271 | 1272 | /** 1273 | * REUSED STYLE 1274 | */ 1275 | 1276 | .container { max-width: 1185px; } 1277 | 1278 | .shape { display: block; } 1279 | 1280 | .about-content, 1281 | .video-card, 1282 | .blog { position: relative; } 1283 | 1284 | 1285 | 1286 | /** 1287 | * HEADER 1288 | */ 1289 | 1290 | .header-action-btn:last-child, 1291 | .navbar .wrapper, 1292 | .overlay { display: none; } 1293 | 1294 | .header.active { 1295 | transform: translateY(-100%); 1296 | animation: slideIn 0.5s ease forwards; 1297 | } 1298 | 1299 | @keyframes slideIn { 1300 | 0% { transform: translateY(-100%); } 1301 | 100% { transform: translateY(0); } 1302 | } 1303 | 1304 | .navbar, 1305 | .navbar.active { all: unset; } 1306 | 1307 | .navbar-list { 1308 | display: flex; 1309 | gap: 50px; 1310 | padding: 0; 1311 | } 1312 | 1313 | .navbar-item:not(:last-child) { border-block-end: none; } 1314 | 1315 | .navbar-link { 1316 | color: var(--eerie-black-1); 1317 | padding-block: 20px; 1318 | } 1319 | 1320 | .header .btn { margin-inline-end: 0; } 1321 | 1322 | 1323 | 1324 | /** 1325 | * HERO 1326 | */ 1327 | 1328 | .hero { padding-block-start: calc(var(--section-padding) + 120px); } 1329 | 1330 | .hero .container { gap: 80px; } 1331 | 1332 | .hero-shape-2 { 1333 | top: -80px; 1334 | z-index: -1; 1335 | } 1336 | 1337 | 1338 | 1339 | /** 1340 | * ABOUT 1341 | */ 1342 | 1343 | .about .container { gap: 110px; } 1344 | 1345 | .about-banner .img-holder { margin-inline: 0; } 1346 | 1347 | .about-shape-3 { 1348 | top: -20px; 1349 | left: -100px; 1350 | z-index: -1; 1351 | } 1352 | 1353 | .about-content { z-index: 1; } 1354 | 1355 | .about-shape-4 { 1356 | top: 30px; 1357 | right: -60px; 1358 | z-index: -1; 1359 | } 1360 | 1361 | 1362 | 1363 | /** 1364 | * VIDEO 1365 | */ 1366 | 1367 | .video-shape-1 { 1368 | top: -50px; 1369 | left: 0; 1370 | } 1371 | 1372 | .video-shape-2 { 1373 | top: -80px; 1374 | right: 120px; 1375 | z-index: 1; 1376 | } 1377 | 1378 | 1379 | 1380 | /** 1381 | * BLOG 1382 | */ 1383 | 1384 | .blog-shape { 1385 | top: 0; 1386 | left: 0; 1387 | } 1388 | 1389 | } -------------------------------------------------------------------------------- /assets/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/Thumbs.db -------------------------------------------------------------------------------- /assets/images/about-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/about-banner.jpg -------------------------------------------------------------------------------- /assets/images/about-shape-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 | -------------------------------------------------------------------------------- /assets/images/about-shape-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 | -------------------------------------------------------------------------------- /assets/images/about-shape-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/about-shape-3.png -------------------------------------------------------------------------------- /assets/images/about-shape-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/blog-1.jpg -------------------------------------------------------------------------------- /assets/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/blog-2.jpg -------------------------------------------------------------------------------- /assets/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/blog-3.jpg -------------------------------------------------------------------------------- /assets/images/blog-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/images/blog-shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/blog-shape.png -------------------------------------------------------------------------------- /assets/images/category-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /assets/images/category-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/images/category-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/category-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/images/course-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/course-1.jpg -------------------------------------------------------------------------------- /assets/images/course-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/course-2.jpg -------------------------------------------------------------------------------- /assets/images/course-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/course-3.jpg -------------------------------------------------------------------------------- /assets/images/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/footer-bg.png -------------------------------------------------------------------------------- /assets/images/hero-banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/hero-banner-1.jpg -------------------------------------------------------------------------------- /assets/images/hero-banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/hero-banner-2.jpg -------------------------------------------------------------------------------- /assets/images/hero-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/images/hero-shape-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /assets/images/hero-shape-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/hero-shape-2.png -------------------------------------------------------------------------------- /assets/images/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/images/video-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/video-banner.jpg -------------------------------------------------------------------------------- /assets/images/video-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/video-bg.png -------------------------------------------------------------------------------- /assets/images/video-shape-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/video-shape-1.png -------------------------------------------------------------------------------- /assets/images/video-shape-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/assets/images/video-shape-2.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 navLinks = document.querySelectorAll("[data-nav-link]"); 28 | const overlay = document.querySelector("[data-overlay]"); 29 | 30 | const toggleNavbar = function () { 31 | navbar.classList.toggle("active"); 32 | overlay.classList.toggle("active"); 33 | } 34 | 35 | addEventOnElem(navTogglers, "click", toggleNavbar); 36 | 37 | const closeNavbar = function () { 38 | navbar.classList.remove("active"); 39 | overlay.classList.remove("active"); 40 | } 41 | 42 | addEventOnElem(navLinks, "click", closeNavbar); 43 | 44 | 45 | 46 | /** 47 | * header active when scroll down to 100px 48 | */ 49 | 50 | const header = document.querySelector("[data-header]"); 51 | const backTopBtn = document.querySelector("[data-back-top-btn]"); 52 | 53 | const activeElem = function () { 54 | if (window.scrollY > 100) { 55 | header.classList.add("active"); 56 | backTopBtn.classList.add("active"); 57 | } else { 58 | header.classList.remove("active"); 59 | backTopBtn.classList.remove("active"); 60 | } 61 | } 62 | 63 | addEventOnElem(window, "scroll", activeElem); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | EduWeb - The Best Program to Enroll for Exchange 13 | 14 | 15 | 16 | 19 | 20 | 21 | 24 | 25 | 26 | 29 | 30 | 31 | 34 | 35 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 51 | 52 |
53 |
54 | 55 | 58 | 59 | 96 | 97 |
98 | 99 | 102 | 103 | 108 | 109 | 110 | Try for free 111 | 112 | 113 | 114 | 115 | 118 | 119 |
120 | 121 |
122 | 123 |
124 |
125 | 126 | 127 | 128 | 129 | 130 |
131 |
132 | 133 | 136 | 137 |
139 |
140 | 141 |
142 | 143 |

144 | The Best Program to Enroll for Exchange 145 |

146 | 147 |

148 | Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit. 149 |

150 | 151 | 152 | Find courses 153 | 154 | 155 | 156 | 157 |
158 | 159 |
160 | 161 |
162 | hero banner 163 |
164 | 165 |
166 | hero banner 167 |
168 | 169 | 170 | 171 | 172 | 173 |
174 | 175 |
176 |
177 | 178 | 179 | 180 | 181 | 182 | 185 | 186 |
187 |
188 | 189 |

Categories

190 | 191 |

192 | Online Classes For Remote Learning. 193 |

194 | 195 |

196 | Consectetur adipiscing elit sed do eiusmod tempor. 197 |

198 | 199 |
    200 | 201 |
  • 202 |
    203 | 204 |
    205 | Online Degree Programs 207 |
    208 | 209 |

    210 | Online Degree Programs 211 |

    212 | 213 |

    214 | Lorem ipsum dolor consec tur elit adicing sed umod tempor. 215 |

    216 | 217 | 7 Courses 218 | 219 |
    220 |
    • 221 | 222 |
  • 223 |
    224 | 225 |
    226 | Non-Degree Programs 228 |
    229 | 230 |

    231 | Non-Degree Programs 232 |

    233 | 234 |

    235 | Lorem ipsum dolor consec tur elit adicing sed umod tempor. 236 |

    237 | 238 | 4 Courses 239 | 240 |
    241 |
    • 242 | 243 |
  • 244 |
    245 | 246 |
    247 | Off-Campus Programs 249 |
    250 | 251 |

    252 | Off-Campus Programs 253 |

    254 | 255 |

    256 | Lorem ipsum dolor consec tur elit adicing sed umod tempor. 257 |

    258 | 259 | 8 Courses 260 | 261 |
    262 |
    • 263 | 264 |
  • 265 |
    266 | 267 |
    268 | Hybrid Distance Programs 270 |
    271 | 272 |

    273 | Hybrid Distance Programs 274 |

    275 | 276 |

    277 | Lorem ipsum dolor consec tur elit adicing sed umod tempor. 278 |

    279 | 280 | 8 Courses 281 | 282 |
    283 |
    • 284 | 285 |
286 | 287 |
288 |
289 | 290 | 291 | 292 | 293 | 294 | 297 | 298 |
299 |
300 | 301 |
302 | 303 |
304 | about banner 306 |
307 | 308 | 310 | 311 | 313 | 314 | 316 | 317 |
318 | 319 |
320 | 321 |

About Us

322 | 323 |

324 | Over 10 Years in Distant learning for Skill Development 325 |

326 | 327 |

328 | Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod ex tempor incididunt labore dolore magna 329 | aliquaenim ad 330 | minim. 331 |

332 | 333 |
    334 | 335 |
  • 336 | 337 | 338 | Expert Trainers 339 |
    • 340 | 341 |
  • 342 | 343 | 344 | Online Remote Learning 345 |
    • 346 | 347 |
  • 348 | 349 | 350 | Lifetime Access 351 |
    • 352 | 353 |
354 | 355 | 357 | 358 |
359 | 360 |
361 |
362 | 363 | 364 | 365 | 366 | 367 | 370 | 371 |
372 |
373 | 374 |

Popular Courses

375 | 376 |

Pick A Course To Get Started

377 | 378 |
    379 | 380 |
  • 381 |
    382 | 383 |
    384 | Build Responsive Real- World Websites with HTML and CSS 386 |
    387 | 388 |
    389 | 390 | 391 | 3 Weeks 392 |
    393 | 394 |
    395 | 396 | Beginner 397 | 398 |

    399 | Build Responsive Real- World Websites with HTML and CSS 400 |

    401 | 402 |
    403 | 404 |
    405 | 406 | 407 | 408 | 409 | 410 |
    411 | 412 |

    (5.0/7 Rating)

    413 | 414 |
    415 | 416 | $29.00 417 | 418 |
      419 | 420 |
    • 421 | 422 | 423 | 8 Lessons 424 |
      • 425 | 426 |
    • 427 | 428 | 429 | 20 Students 430 |
      • 431 | 432 |
    433 | 434 |
    435 | 436 |
    437 |
    • 438 | 439 |
  • 440 |
    441 | 442 |
    443 | Java Programming Masterclass for Software Developers 445 |
    446 | 447 |
    448 | 449 | 450 | 8 Weeks 451 |
    452 | 453 |
    454 | 455 | Advanced 456 | 457 |

    458 | Java Programming Masterclass for Software Developers 459 |

    460 | 461 |
    462 | 463 |
    464 | 465 | 466 | 467 | 468 | 469 |
    470 | 471 |

    (4.5 /9 Rating)

    472 | 473 |
    474 | 475 | $49.00 476 | 477 |
      478 | 479 |
    • 480 | 481 | 482 | 15 Lessons 483 |
      • 484 | 485 |
    • 486 | 487 | 488 | 35 Students 489 |
      • 490 | 491 |
    492 | 493 |
    494 | 495 |
    496 |
    • 497 | 498 |
  • 499 |
    500 | 501 |
    502 | The Complete Camtasia Course for Content Creators 504 |
    505 | 506 |
    507 | 508 | 509 | 3 Weeks 510 |
    511 | 512 |
    513 | 514 | Intermediate 515 | 516 |

    517 | The Complete Camtasia Course for Content Creators 518 |

    519 | 520 |
    521 | 522 |
    523 | 524 | 525 | 526 | 527 | 528 |
    529 | 530 |

    (4.9 /7 Rating)

    531 | 532 |
    533 | 534 | $35.00 535 | 536 |
      537 | 538 |
    • 539 | 540 | 541 | 13 Lessons 542 |
      • 543 | 544 |
    • 545 | 546 | 547 | 18 Students 548 |
      • 549 | 550 |
    551 | 552 |
    553 | 554 |
    555 |
    • 556 | 557 |
558 | 559 | 560 | Browse more courses 561 | 562 | 563 | 564 | 565 |
566 |
567 | 568 | 569 | 570 | 571 | 572 | 575 | 576 |
578 |
579 | 580 |
581 | 582 |
583 | video banner 585 | 586 | 589 |
590 | 591 | 593 | 594 | 596 | 597 |
598 | 599 |
600 |
601 | 602 | 603 | 604 | 605 | 606 | 609 | 610 |
611 |
612 | 613 |
    614 | 615 |
  • 616 |
    617 |

    29.3k

    618 | 619 |

    Student Enrolled

    620 |
    621 |
    • 622 | 623 |
  • 624 |
    625 |

    32.4K

    626 | 627 |

    Class Completed

    628 |
    629 |
    • 630 | 631 |
  • 632 |
    633 |

    100%

    634 | 635 |

    Satisfaction Rate

    636 |
    637 |
    • 638 | 639 |
  • 640 |
    641 |

    354+

    642 | 643 |

    Top Instructors

    644 |
    645 |
    • 646 | 647 |
648 | 649 |
650 |
651 | 652 | 653 | 654 | 655 | 656 | 659 | 660 |
662 |
663 | 664 |

Latest Articles

665 | 666 |

Get News With Eduweb

667 | 668 |
    669 | 670 |
  • 671 |
    672 | 673 |
    674 | Become A Better Blogger: Content Planning 676 |
    677 | 678 |
    679 | 680 | 681 | 682 | 683 | 684 | Online 685 | 686 |

    687 | Become A Better Blogger: Content Planning 688 |

    689 | 690 |
      691 | 692 |
    • 693 | 694 | 695 | Oct 10, 2021 696 |
      • 697 | 698 |
    • 699 | 700 | 701 | Com 09 702 |
      • 703 | 704 |
    705 | 706 |

    707 | Lorem Ipsum Dolor Sit Amet Cons Tetur Adipisicing Sed. 708 |

    709 | 710 |
    711 | 712 |
    713 |
    • 714 | 715 |
  • 716 |
    717 | 718 |
    719 | Become A Better Blogger: Content Planning 721 |
    722 | 723 |
    724 | 725 | 726 | 727 | 728 | 729 | Online 730 | 731 |

    732 | Become A Better Blogger: Content Planning 733 |

    734 | 735 |
      736 | 737 |
    • 738 | 739 | 740 | Oct 10, 2021 741 |
      • 742 | 743 |
    • 744 | 745 | 746 | Com 09 747 |
      • 748 | 749 |
    750 | 751 |

    752 | Lorem Ipsum Dolor Sit Amet Cons Tetur Adipisicing Sed. 753 |

    754 | 755 |
    756 | 757 |
    758 |
    • 759 | 760 |
  • 761 |
    762 | 763 |
    764 | Become A Better Blogger: Content Planning 766 |
    767 | 768 |
    769 | 770 | 771 | 772 | 773 | 774 | Online 775 | 776 |

    777 | Become A Better Blogger: Content Planning 778 |

    779 | 780 |
      781 | 782 |
    • 783 | 784 | 785 | Oct 10, 2021 786 |
      • 787 | 788 |
    • 789 | 790 | 791 | Com 09 792 |
      • 793 | 794 |
    795 | 796 |

    797 | Lorem Ipsum Dolor Sit Amet Cons Tetur Adipisicing Sed. 798 |

    799 | 800 |
    801 | 802 |
    803 |
    • 804 | 805 |
806 | 807 | 809 | 810 |
811 |
812 | 813 |
814 |
815 | 816 | 817 | 818 | 819 | 820 | 823 | 824 | 991 | 992 | 993 | 994 | 995 | 996 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | 1008 | 1011 | 1012 | 1013 | 1016 | 1017 | 1018 | 1019 | 1020 | 1021 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | EduWeb - The Best Program to Enroll for Exchange 2 | This is an education html template made by codewithsadee 3 | 4 | 5 | 6 | #---------- HEADER ----------# 7 | 8 | alt = EduWeb logo 9 | 10 | aria-label = close menu 11 | 12 | 13 | Home 14 | About 15 | Courses 16 | Blog 17 | Contact 18 | 19 | aria-label = toggle search 20 | 21 | 22 | aria-label = cart 23 | 24 | 0 25 | 26 | Try for free 27 | 28 | 29 | aria-label = open menu 30 | 31 | 32 | 33 | 34 | 35 | #---------- HERO ----------# 36 | 37 | The Best Program to 38 | Enroll 39 | for Exchange 40 | 41 | Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit. 42 | 43 | Find courses 44 | 45 | 46 | alt = hero banner 47 | 48 | 49 | 50 | #---------- CATEGORY ----------# 51 | 52 | Categories 53 | 54 | Online 55 | Classes 56 | For Remote Learning. 57 | 58 | Consectetur adipiscing elit sed do eiusmod tempor. 59 | 60 | color = 170, 75%, 41% 61 | alt = Online Degree Programs 62 | Online Degree Programs 63 | Lorem ipsum dolor consec tur elit adicing sed umod tempor. 64 | 7 Courses 65 | 66 | color = 351, 83%, 61% 67 | alt = Non-Degree Programs 68 | Non-Degree Programs 69 | 4 Courses 70 | 71 | color = 229, 75%, 58% 72 | alt = Off-Campus Programs 73 | Off-Campus Programs 74 | 8 Courses 75 | 76 | color = 42, 94%, 55% 77 | alt = Hybrid Distance Programs 78 | Hybrid Distance Programs 79 | 80 | 81 | 82 | #---------- ABOUT ----------# 83 | 84 | alt = about banner 85 | 86 | About Us 87 | 88 | Over 10 Years in 89 | Distant learning 90 | for Skill Development 91 | 92 | Lorem ipsum dolor sit amet consectur adipiscing elit sed eiusmod ex tempor incididunt labore dolore magna aliquaenim ad minim. 93 | 94 | 95 | 96 | Expert Trainers 97 | Online Remote Learning 98 | Lifetime Access 99 | 100 | 101 | 102 | #---------- COURSE ----------# 103 | 104 | Popular Courses 105 | 106 | Pick A Course To Get Started 107 | 108 | alt = Build Responsive Real- World Websites with HTML and CSS 109 | 110 | 111 | 3 Weeks 112 | 113 | Beginner 114 | Build Responsive Real- World Websites with HTML and CSS 115 | 116 | 117 | (5.0/7 Rating) 118 | $29.00 119 | 120 | 121 | 8 Lessons 122 | 123 | 124 | 20 Students 125 | 126 | 127 | alt = Java Programming Masterclass for Software Developers 128 | 129 | 8 Weeks 130 | Advanced 131 | Java Programming Masterclass for Software Developers 132 | 133 | (4.5 /9 Rating) 134 | $49.00 135 | 136 | 15 Lessons 137 | 35 Students 138 | 139 | 140 | alt = The Complete Camtasia Course for Content Creators 141 | 142 | 3 Weeks 143 | Intermediate 144 | The Complete Camtasia Course for Content Creators 145 | 146 | (4.9 /7 Rating) 147 | $35.00 148 | 149 | 13 Lessons 150 | 18 Students 151 | 152 | 153 | Browse more courses 154 | 155 | 156 | 157 | 158 | #---------- VIDEO ----------# 159 | 160 | alt = video banner 161 | 162 | aria-label = play video 163 | 164 | 165 | 166 | 167 | #---------- STATS ----------# 168 | 169 | color = 170, 75%, 41% 170 | 29.3k 171 | Student Enrolled 172 | 173 | color: = 351, 83%, 61% 174 | 32.4K 175 | Class Completed 176 | 177 | color = 260, 100%, 67% 178 | 100% 179 | Satisfaction Rate 180 | 181 | color = 42, 94%, 55% 182 | 354+ 183 | Top Instructors 184 | 185 | 186 | 187 | #---------- BLOG ----------# 188 | 189 | Latest Articles 190 | Get News With Eduweb 191 | 192 | alt = Become A Better Blogger: Content Planning 193 | 194 | aria-label = read more 195 | 196 | 197 | Online 198 | 199 | Become A Better Blogger: Content Planning 200 | 201 | 202 | Oct 10, 2021 203 | 204 | 205 | Com 09 206 | 207 | Lorem Ipsum Dolor Sit Amet Cons Tetur Adipisicing Sed. 208 | 209 | 210 | 211 | #---------- FOOTER ----------# 212 | 213 | alt = EduWeb logo 214 | 215 | Lorem ipsum dolor amet consecto adi pisicing elit sed eiusm tempor incidid unt labore dolore. 216 | 217 | Add: 218 | 70-80 Upper St Norwich NR2 219 | Call: 220 | +01 123 4567 890 221 | Email: 222 | info@eduweb.com 223 | 224 | Online Platform 225 | About 226 | Courses 227 | Instructor 228 | Events 229 | Instructor Profile 230 | Purchase Guide 231 | 232 | Links 233 | Contact Us 234 | Gallery 235 | News & Articles 236 | FAQ's 237 | Sign In/Registration 238 | Coming Soon 239 | 240 | Contacts 241 | Enter your email address to register to our newsletter subscription 242 | 243 | placeholder = Your email 244 | Subscribe 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | Copyright 2022 All Rights Reserved by codewithsadee 255 | 256 | 257 | 258 | #---------- BACK TO TOP ----------# 259 | 260 | aria-label = back top top 261 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/eduweb/e95ce3bd395db274166c4d8abe7970b699a4c39d/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 | 13 | ``` 14 | 15 | Ionicon 16 | 17 | ``` html 18 | 19 | 20 | ``` 21 | 22 | --- 23 | 24 | ## Colors 25 | 26 | ``` css 27 | --selective-yellow: hsl(42, 94%, 55%); 28 | --eerie-black-1: hsl(0, 0%, 9%); 29 | --eerie-black-2: hsl(180, 3%, 7%); 30 | --quick-silver: hsl(0, 0%, 65%); 31 | --radical-red: hsl(351, 83%, 61%); 32 | --light-gray: hsl(0, 0%, 80%); 33 | --isabelline: hsl(36, 33%, 94%); 34 | --gray-x-11: hsl(0, 0%, 73%); 35 | --kappel_15: hsla(170, 75%, 41%, 0.15); 36 | --platinum: hsl(0, 0%, 90%); 37 | --gray-web: hsl(0, 0%, 50%); 38 | --black_80: hsla(0, 0%, 0%, 0.8); 39 | --white_50: hsla(0, 0%, 100%, 0.5); 40 | --black_50: hsla(0, 0%, 0%, 0.5); 41 | --black_30: hsla(0, 0%, 0%, 0.3); 42 | --kappel: hsl(170, 75%, 41%); 43 | --white: hsl(0, 0%, 100%); 44 | ``` 45 | 46 | ## Gradient color 47 | 48 | ``` css 49 | --gradient: linear-gradient(-90deg,hsl(151, 58%, 46%) 0%,hsl(170, 75%, 41%) 100%); 50 | ``` 51 | 52 | ## Typography 53 | 54 | ``` css 55 | --ff-league_spartan: 'League Spartan', sans-serif; 56 | --ff-poppins: 'Poppins', sans-serif; 57 | 58 | --fs-1: 4.2rem; 59 | --fs-2: 3.2rem; 60 | --fs-3: 2.3rem; 61 | --fs-4: 1.8rem; 62 | --fs-5: 1.5rem; 63 | --fs-6: 1.4rem; 64 | --fs-7: 1.3rem; 65 | 66 | --fw-500: 500; 67 | --fw-600: 600; 68 | ``` 69 | 70 | ## Spacing 71 | 72 | ``` css 73 | --section-padding: 75px; 74 | ``` 75 | 76 | ## Shadow 77 | 78 | ``` css 79 | --shadow-1: 0 6px 15px 0 hsla(0, 0%, 0%, 0.05); 80 | --shadow-2: 0 10px 30px hsla(0, 0%, 0%, 0.06); 81 | --shadow-3: 0 10px 50px 0 hsla(220, 53%, 22%, 0.1); 82 | ``` 83 | 84 | ## Border Radius 85 | 86 | ``` css 87 | --radius-pill: 500px; 88 | --radius-circle: 50%; 89 | --radius-3: 3px; 90 | --radius-5: 5px; 91 | --radius-10: 10px; 92 | ``` 93 | 94 | ## Transition 95 | 96 | ``` css 97 | --transition-1: 0.25s ease; 98 | --transition-2: 0.5s ease; 99 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 100 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 101 | ``` 102 | --------------------------------------------------------------------------------