├── .vscode └── settings.json ├── README.md ├── app.js ├── index.html └── styles.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Simple website created using HTML, CSS & Javascript with smooth scroll effect 2 | 3 | Watch the full tutorial on how I built this website on my Youtube @Brian Design https://youtu.be/3-2Pj5hxwrw 4 | 5 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector('#mobile-menu'); 2 | const menuLinks = document.querySelector('.navbar__menu'); 3 | const navLogo = document.querySelector('#navbar__logo'); 4 | 5 | // Display Mobile Menu 6 | const mobileMenu = () => { 7 | menu.classList.toggle('is-active'); 8 | menuLinks.classList.toggle('active'); 9 | }; 10 | 11 | menu.addEventListener('click', mobileMenu); 12 | 13 | // Show active menu when scrolling 14 | const highlightMenu = () => { 15 | const elem = document.querySelector('.highlight'); 16 | const homeMenu = document.querySelector('#home-page'); 17 | const aboutMenu = document.querySelector('#about-page'); 18 | const servicesMenu = document.querySelector('#services-page'); 19 | let scrollPos = window.scrollY; 20 | // console.log(scrollPos); 21 | 22 | // adds 'highlight' class to my menu items 23 | if (window.innerWidth > 960 && scrollPos < 600) { 24 | homeMenu.classList.add('highlight'); 25 | aboutMenu.classList.remove('highlight'); 26 | return; 27 | } else if (window.innerWidth > 960 && scrollPos < 1400) { 28 | aboutMenu.classList.add('highlight'); 29 | homeMenu.classList.remove('highlight'); 30 | servicesMenu.classList.remove('highlight'); 31 | return; 32 | } else if (window.innerWidth > 960 && scrollPos < 2345) { 33 | servicesMenu.classList.add('highlight'); 34 | aboutMenu.classList.remove('highlight'); 35 | return; 36 | } 37 | 38 | if ((elem && window.innerWIdth < 960 && scrollPos < 600) || elem) { 39 | elem.classList.remove('highlight'); 40 | } 41 | }; 42 | 43 | window.addEventListener('scroll', highlightMenu); 44 | window.addEventListener('click', highlightMenu); 45 | 46 | // Close mobile Menu when clicking on a menu item 47 | const hideMobileMenu = () => { 48 | const menuBars = document.querySelector('.is-active'); 49 | if (window.innerWidth <= 768 && menuBars) { 50 | menu.classList.toggle('is-active'); 51 | menuLinks.classList.remove('active'); 52 | } 53 | }; 54 | 55 | menuLinks.addEventListener('click', hideMobileMenu); 56 | navLogo.addEventListener('click', hideMobileMenu); 57 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scroll Website 7 | 8 | 14 | 15 | 16 | 17 | 42 | 43 | 44 |
45 |
46 |

Choose your colors

47 |

Unlimited Possibilities

48 | 49 |
50 |
51 | 52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |

What do we do?

60 |

We help businesses scale

61 |

Schedule a call to learn more about our services

62 | 63 |
64 |
65 |
66 | 67 | 68 |
69 |

Our Services

70 |
71 |
72 |

Custom Colorways

73 |

AI Powered technology

74 |
75 |
76 |
77 |

Are you Ready?

78 |

Take the lepa

79 |
80 |
81 |
82 |

Full Gradients

83 |

100 Combinations

84 |
85 |
86 |
87 |

Infinite Choices

88 |

1000's of colors

89 |
90 |
91 |
92 |
93 | 94 | 95 |
96 |
97 |
98 |

Join Our Team

99 |

Sign Up Today

100 |

See what makes us different

101 | 102 |
103 |
104 |
105 | 106 |
107 |
108 |
109 |
110 | 111 | 112 |
113 |
114 |
115 |
116 |

About Us

117 | How it works Testimonials 118 | Careers Terms of Service 119 |
120 |
121 |

Contact Us

122 | Contact Support 123 | Destinations 124 |
125 |
126 |
127 |
128 |

Videos

129 | Submit Video Ambassadors 130 | Agency 131 |
132 |
133 |

Social Media

134 | Instagram Facebook 135 | Youtube Twitter 136 |
137 |
138 |
139 |
140 | 163 |
164 |
165 | 166 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Kumbh Sans', sans-serif; 6 | scroll-behavior: smooth; 7 | } 8 | 9 | .navbar { 10 | background: #131313; 11 | height: 80px; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | font-size: 1.2rem; 16 | position: sticky; 17 | top: 0; 18 | z-index: 999; 19 | } 20 | 21 | .navbar__container { 22 | display: flex; 23 | justify-content: space-between; 24 | height: 80px; 25 | z-index: 1; 26 | width: 100%; 27 | max-width: 1300px; 28 | margin: 0 auto; 29 | padding: 0 50px; 30 | } 31 | 32 | #navbar__logo { 33 | background-color: #ff8177; 34 | background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%); 35 | background-size: 100%; 36 | -webkit-background-clip: text; 37 | -moz-background-clip: text; 38 | -webkit-text-fill-color: transparent; 39 | -moz-text-fill-color: transparent; 40 | display: flex; 41 | align-items: center; 42 | cursor: pointer; 43 | text-decoration: none; 44 | font-size: 2rem; 45 | } 46 | 47 | .navbar__menu { 48 | display: flex; 49 | align-items: center; 50 | list-style: none; 51 | } 52 | 53 | .navbar__item { 54 | height: 80px; 55 | } 56 | 57 | .navbar__links { 58 | color: #fff; 59 | display: flex; 60 | align-items: center; 61 | justify-content: center; 62 | width: 125px; 63 | text-decoration: none; 64 | height: 100%; 65 | transition: all 0.3s ease; 66 | } 67 | 68 | .navbar__btn { 69 | display: flex; 70 | justify-content: center; 71 | align-items: center; 72 | padding: 0 1rem; 73 | width: 100%; 74 | } 75 | 76 | .button { 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | text-decoration: none; 81 | padding: 10px 20px; 82 | height: 100%; 83 | width: 100%; 84 | border: none; 85 | outline: none; 86 | border-radius: 4px; 87 | background: #833ab4; 88 | background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); 89 | background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); 90 | color: #fff; 91 | transition: all 0.3s ease; 92 | } 93 | 94 | .navbar__links:hover { 95 | color: #9518fc; 96 | transition: all 0.3s ease; 97 | } 98 | 99 | @media screen and (max-width: 960px) { 100 | .navbar__container { 101 | display: flex; 102 | justify-content: space-between; 103 | height: 80px; 104 | z-index: 1; 105 | width: 100%; 106 | max-width: 1300px; 107 | padding: 0; 108 | } 109 | 110 | .navbar__menu { 111 | display: grid; 112 | grid-template-columns: auto; 113 | margin: 0; 114 | width: 100%; 115 | position: absolute; 116 | top: -1000px; 117 | opacity: 1; 118 | transition: all 0.5s ease; 119 | z-index: -1; 120 | } 121 | 122 | .navbar__menu.active { 123 | background: #131313; 124 | top: 100%; 125 | opacity: 1; 126 | transition: all 0.5s ease; 127 | z-index: 99; 128 | height: 60vh; 129 | font-size: 1.6rem; 130 | } 131 | 132 | #navbar__logo { 133 | padding-left: 25px; 134 | } 135 | 136 | .navbar__toggle .bar { 137 | width: 25px; 138 | height: 3px; 139 | margin: 5px auto; 140 | transition: all 0.3s ease-in-out; 141 | background: #fff; 142 | } 143 | 144 | .navbar__item { 145 | width: 100%; 146 | } 147 | 148 | .navbar__links { 149 | text-align: center; 150 | padding: 2rem; 151 | width: 100%; 152 | display: table; 153 | } 154 | 155 | .navbar__btn { 156 | padding-bottom: 2rem; 157 | } 158 | 159 | .button { 160 | display: flex; 161 | justify-content: center; 162 | align-items: center; 163 | width: 80%; 164 | height: 80px; 165 | margin: 0; 166 | } 167 | 168 | #mobile-menu { 169 | position: absolute; 170 | top: 20%; 171 | right: 5%; 172 | transform: translate(5%, 20%); 173 | } 174 | 175 | .navbar__toggle .bar { 176 | display: block; 177 | cursor: pointer; 178 | } 179 | 180 | #mobile-menu.is-active .bar:nth-child(2) { 181 | opacity: 0; 182 | } 183 | 184 | #mobile-menu.is-active .bar:nth-child(1) { 185 | transform: translateY(8px) rotate(45deg); 186 | } 187 | 188 | #mobile-menu.is-active .bar:nth-child(3) { 189 | transform: translateY(-8px) rotate(-45deg); 190 | } 191 | } 192 | 193 | /* Hero Section */ 194 | .hero { 195 | background: #000000; 196 | background: linear-gradient(to right, #161616, #000000); 197 | padding: 200px 0; 198 | } 199 | 200 | .hero__container { 201 | display: flex; 202 | flex-direction: column; 203 | justify-content: center; 204 | align-items: center; 205 | max-width: 1200px; 206 | margin: 0 auto; 207 | height: 90%; 208 | text-align: center; 209 | padding: 30px; 210 | } 211 | 212 | .hero__heading { 213 | font-size: 100px; 214 | margin-bottom: 24px; 215 | color: #fff; 216 | } 217 | 218 | .hero__heading span { 219 | background: #ee0979; /* fallback for old browsers */ 220 | background: -webkit-linear-gradient( 221 | to right, 222 | #ff6a00, 223 | #ee0979 224 | ); /* Chrome 10-25, Safari 5.1-6 */ 225 | background: linear-gradient( 226 | to right, 227 | #ff6a00, 228 | #ee0979 229 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 230 | background-size: 100%; 231 | -webkit-background-clip: text; 232 | -moz-background-clip: text; 233 | -webkit-text-fill-color: transparent; 234 | -mo-text-fill-color: transparent; 235 | } 236 | 237 | .hero__description { 238 | font-size: 60px; 239 | background: #da22ff; /* fallback for old browsers */ 240 | background: -webkit-linear-gradient( 241 | to right, 242 | #9114ff, 243 | #da22ff 244 | ); /* Chrome 10-25, Safari 5.1-6 */ 245 | background: linear-gradient( 246 | to right, 247 | #8f0eff, 248 | #da22ff 249 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 250 | background-size: 100%; 251 | -webkit-background-clip: text; 252 | -moz-background-clip: text; 253 | -webkit-text-fill-color: transparent; 254 | -moz-text-fill-color: transparent; 255 | } 256 | 257 | .highlight { 258 | border-bottom: 4px solid rgb(132, 0, 255); 259 | } 260 | 261 | @media screen and (max-width: 768px) { 262 | .hero__heading { 263 | font-size: 60px; 264 | } 265 | 266 | .hero__description { 267 | font-size: 40px; 268 | } 269 | } 270 | 271 | /* About Section */ 272 | .main { 273 | background-color: #131313; 274 | padding: 10rem 0; 275 | } 276 | 277 | .main__container { 278 | display: grid; 279 | grid-template-columns: 1fr 1fr; 280 | align-items: center; 281 | justify-content: center; 282 | margin: 0 auto; 283 | height: 90%; 284 | z-index: 1; 285 | width: 100%; 286 | max-width: 1300px; 287 | padding: 0 50px; 288 | } 289 | 290 | .main__content { 291 | color: #fff; 292 | width: 100%; 293 | } 294 | 295 | .main__content h1 { 296 | font-size: 2rem; 297 | background-color: #fe3b6f; 298 | background-image: linear-gradient(to top, #ff087b 0%, #ed1a52 100%); 299 | background-size: 100%; 300 | -webkit-background-clip: text; 301 | -moz-background-clip: text; 302 | -webkit-text-fill-color: transparent; 303 | -moz-text-fill-color: transparent; 304 | text-transform: uppercase; 305 | margin-bottom: 32px; 306 | } 307 | 308 | .main__content h2 { 309 | font-size: 4rem; 310 | background: #ff8177; /* fallback for old browsers */ 311 | background: -webkit-linear-gradient( 312 | to right, 313 | #9114ff, 314 | #da22ff 315 | ); /* Chrome 10-25, Safari 5.1-6 */ 316 | background: linear-gradient( 317 | to right, 318 | #8f0eff, 319 | #da22ff 320 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 321 | background-size: 100%; 322 | -webkit-background-clip: text; 323 | -moz-background-clip: text; 324 | -webkit-text-fill-color: transparent; 325 | -moz-text-fill-color: transparent; 326 | } 327 | 328 | .main__content p { 329 | margin-top: 1rem; 330 | font-size: 2rem; 331 | font-weight: 700; 332 | } 333 | 334 | .main__btn { 335 | font-size: 1.8rem; 336 | background: #833ab4; 337 | background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); 338 | background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); 339 | padding: 20px 60px; 340 | border: none; 341 | border-radius: 4px; 342 | margin-top: 2rem; 343 | cursor: pointer; 344 | position: relative; 345 | transition: all 0.35s; 346 | outline: none; 347 | } 348 | 349 | .main__btn a { 350 | position: relative; 351 | z-index: 2; 352 | color: #fff; 353 | text-decoration: none; 354 | } 355 | 356 | .main__btn:after { 357 | position: absolute; 358 | content: ''; 359 | top: 0; 360 | left: 0; 361 | width: 0; 362 | height: 100%; 363 | background: #ff1ead; 364 | transition: all 0.35s; 365 | border-radius: 4px; 366 | } 367 | 368 | .main__btn:hover { 369 | color: #fff; 370 | } 371 | 372 | .main__btn:hover:after { 373 | width: 100%; 374 | } 375 | 376 | .main__img--container { 377 | text-align: center; 378 | } 379 | 380 | .main__img--card { 381 | margin: 10px; 382 | height: 500px; 383 | width: 500px; 384 | border-radius: 4px; 385 | display: flex; 386 | flex-direction: column; 387 | justify-content: center; 388 | color: #fff; 389 | background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); 390 | } 391 | 392 | .fa-layer-group, 393 | .fa-users { 394 | font-size: 14rem; 395 | } 396 | 397 | #card-2 { 398 | background: #ff512f; 399 | background: -webkit-linear-gradient(to right, #dd2476, #ff512f); 400 | background: linear-gradient(to right, #dd2476, #ff512f); 401 | } 402 | 403 | /* Mobile Responsive */ 404 | @media screen and (max-width: 1100px) { 405 | .main__container { 406 | display: grid; 407 | grid-template-columns: 1fr; 408 | align-items: center; 409 | justify-content: center; 410 | width: 100%; 411 | margin: 0 auto; 412 | height: 90%; 413 | } 414 | 415 | .main__img--container { 416 | display: flex; 417 | justify-content: center; 418 | } 419 | 420 | .main__img--card { 421 | height: 425px; 422 | width: 425px; 423 | } 424 | 425 | .main__content { 426 | text-align: center; 427 | margin-bottom: 4rem; 428 | } 429 | 430 | .main__content h1 { 431 | font-size: 2.5rem; 432 | margin-top: 2rem; 433 | } 434 | 435 | .main__content h2 { 436 | font-size: 3rem; 437 | } 438 | 439 | .main__content p { 440 | margin-top: 1rem; 441 | font-size: 1.5rem; 442 | } 443 | } 444 | 445 | @media screen and (max-width: 480px) { 446 | .main__img--card { 447 | width: 250px; 448 | height: 250px; 449 | } 450 | 451 | .fa-users, 452 | .fa-layer-group { 453 | font-size: 4rem; 454 | } 455 | 456 | .main__content h1 { 457 | font-size: 2rem; 458 | margin-top: 3rem; 459 | } 460 | .main__content h2 { 461 | font-size: 2rem; 462 | } 463 | 464 | .main__content p { 465 | margin-top: 2rem; 466 | } 467 | 468 | .main__btn { 469 | padding: 12px 36px; 470 | margin: 2.5rem 0; 471 | } 472 | } 473 | 474 | /* Services Section */ 475 | .services { 476 | background: #131313; 477 | display: flex; 478 | flex-direction: column; 479 | justify-content: center; 480 | align-items: center; 481 | height: 100%; 482 | padding: 10rem 0; 483 | } 484 | 485 | .services h1 { 486 | background-color: #ff8177; 487 | background-image: linear-gradient(to right, #ff0844 0%, #f7673c 100%); 488 | background-size: 100%; 489 | -webkit-background-clip: text; 490 | -moz-background-clip: text; 491 | -webkit-text-fill-color: transparent; 492 | -moz-text-fill-color: transparent; 493 | margin-bottom: 5rem; 494 | font-size: 2.5rem; 495 | } 496 | 497 | .services__wrapper { 498 | display: grid; 499 | grid-template-columns: 1fr 1fr 1fr 1fr; 500 | grid-template-rows: 1fr; 501 | } 502 | 503 | .services__card { 504 | margin: 10px; 505 | height: 425px; 506 | width: 300px; 507 | border-radius: 4px; 508 | display: flex; 509 | flex-direction: column; 510 | justify-content: center; 511 | color: #fff; 512 | background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); 513 | transition: 0.3s ease-in; 514 | } 515 | 516 | .services__card:nth-child(2) { 517 | background: #1fa2ff; /* fallback for old browsers */ 518 | background: -webkit-linear-gradient( 519 | to right, 520 | #a6ffcb, 521 | #12d8fa, 522 | #1fa2ff 523 | ); /* Chrome 10-25, Safari 5.1-6 */ 524 | background: linear-gradient( 525 | to right, 526 | #a6ffcb, 527 | #12d8fa, 528 | #1fa2ff 529 | ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 530 | } 531 | 532 | .services__card:nth-child(3) { 533 | background-image: linear-gradient( 534 | -225deg, 535 | #231557 0%, 536 | #44107a 29%, 537 | #ff1361 67%, 538 | #fff800 100% 539 | ); 540 | } 541 | 542 | .services__card h2 { 543 | text-align: center; 544 | } 545 | 546 | .services__card p { 547 | text-align: center; 548 | margin-top: 24px; 549 | font-size: 20px; 550 | } 551 | 552 | .services__btn { 553 | display: flex; 554 | justify-content: center; 555 | margin-top: 16px; 556 | } 557 | 558 | .services__card button { 559 | color: #fff; 560 | padding: 14px 24px; 561 | border: none; 562 | outline: none; 563 | border-radius: 4px; 564 | background: #131313; 565 | font-size: 1rem; 566 | } 567 | 568 | .services__card button:hover { 569 | cursor: pointer; 570 | } 571 | 572 | .services__card:hover { 573 | transform: scale(1.075); 574 | transition: 0.3s ease-in; 575 | cursor: pointer; 576 | } 577 | 578 | @media screen and (max-width: 1300px) { 579 | .services__wrapper { 580 | grid-template-columns: 1fr 1fr; 581 | } 582 | } 583 | 584 | @media screen and (max-width: 768px) { 585 | .services__wrapper { 586 | grid-template-columns: 1fr; 587 | } 588 | } 589 | 590 | /* Footer CSS */ 591 | .footer__container { 592 | background-color: #131313; 593 | padding: 5rem 0; 594 | display: flex; 595 | flex-direction: column; 596 | justify-content: center; 597 | align-items: center; 598 | } 599 | 600 | #footer__logo { 601 | color: #fff; 602 | display: flex; 603 | align-items: center; 604 | cursor: pointer; 605 | text-decoration: none; 606 | font-size: 2rem; 607 | } 608 | 609 | .footer__links { 610 | width: 100%; 611 | max-width: 1000px; 612 | display: flex; 613 | justify-content: center; 614 | } 615 | 616 | .footer__link--wrapper { 617 | display: flex; 618 | } 619 | 620 | .footer__link--items { 621 | display: flex; 622 | flex-direction: column; 623 | align-items: flex-start; 624 | margin: 16px; 625 | text-align: left; 626 | width: 160px; 627 | box-sizing: border-box; 628 | } 629 | 630 | .footer__link--items h2 { 631 | margin-bottom: 16px; 632 | color: #fff; 633 | } 634 | 635 | .footer__link--items a { 636 | color: #fff; 637 | text-decoration: none; 638 | margin-bottom: 0.5rem; 639 | transition: 0.3 ease-out; 640 | } 641 | 642 | .footer__link--items a:hover { 643 | color: #e9e9e9; 644 | transition: 0.3 ease-out; 645 | } 646 | 647 | .social__icon--link { 648 | color: #fff; 649 | font-size: 24px; 650 | } 651 | 652 | .social__media { 653 | max-width: 1000px; 654 | width: 100%; 655 | } 656 | 657 | .social__media--wrap { 658 | display: flex; 659 | justify-content: space-between; 660 | align-items: center; 661 | width: 90%; 662 | max-width: 1000px; 663 | margin: 40px auto 0 auto; 664 | } 665 | 666 | .social__icons { 667 | display: flex; 668 | justify-content: space-between; 669 | align-items: center; 670 | width: 240px; 671 | } 672 | 673 | .website__rights { 674 | color: #fff; 675 | } 676 | 677 | @media screen and (max-width: 820px) { 678 | .footer__links { 679 | padding-top: 2rem; 680 | } 681 | 682 | #footer__logo { 683 | margin-bottom: 2rem; 684 | } 685 | 686 | .website__rights { 687 | margin-bottom: 2rem; 688 | } 689 | 690 | .footer__link--wrapper { 691 | flex-direction: column; 692 | } 693 | 694 | .social__media--wrap { 695 | flex-direction: column; 696 | } 697 | } 698 | 699 | @media screen and (max-width: 480px) { 700 | .footer__link--items { 701 | margin: 0; 702 | padding: 10px; 703 | width: 100%; 704 | } 705 | } 706 | --------------------------------------------------------------------------------