├── Heading-Now-Variable.ttf ├── README.md ├── icecream.png ├── index.html ├── script.js └── style.css /Heading-Now-Variable.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/MOQO/7ccd0021ec09c3515a4f438be3ecc5583d2e7b27/Heading-Now-Variable.ttf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MOQO 2 | It's a clone website of "moqo.be" a branding agency based in Kortrijk, Belgium. They specialize in corporate branding, product branding, and employer branding 3 | -------------------------------------------------------------------------------- /icecream.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/MOQO/7ccd0021ec09c3515a4f438be3ecc5583d2e7b27/icecream.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MOQO 9 | 10 | 11 | 12 | 13 | 14 | 20 |
21 |
22 |

we build brands

23 |
24 | 26 |
27 |
28 |
29 |
30 |
31 |

LET’S TURN

32 |

YOUR

33 |
34 |

STORY

35 |

WELL THOUGHT-OUT. 36 | COVERING YOUR BUSINESS STRATEGY. 37 | RESPONSIVE TO TIME AND TRENDS.

38 |
39 |
40 | 45 |
46 |
47 |
48 |
49 | 51 |
52 | 53 |
54 |
55 | 57 |
58 |
59 |
60 | 62 |
63 | 64 |
65 |
66 | 68 |
69 | 70 |
71 |
72 | 74 |
75 | 76 |
77 |
78 |
79 |
80 |

more cases

81 |
82 |

WE’LL BE
YOUR SPARRING
PARTNERS

83 |
THIS IS YOUR TEAM OF BRAND EXPERTS,
READY TO MAKE YOUR BRAND STAND OUT.
84 |
ABOUT MOQO
85 |
86 | 88 |
89 |
90 |
91 |
92 |

BRANDING

93 |
94 |

INSIGHTS

95 |

ENJOY THIS FIVE-MINUTE BREAK TO STAY UP-TO-DATE AND GET INSPIRED.

96 |
97 |
98 |
99 |
100 | 102 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, molestias.

103 |
104 |
105 | 107 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, molestias.

108 |
109 |
110 |
111 |

more insights

112 |
113 | 114 |
115 |
116 |

LET’S BUILD
YOUR BRAND

117 |
THIS IS YOUR TEAM OF BRAND EXPERTS,
READY TO MAKE YOUR BRAND STAND OUT.
118 |
ABOUT MOQO
119 |
120 | 159 |
160 | 161 | 162 | 163 | 166 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* ===( Build By : CODE AASHU )=== */ 2 | function pageOne() { 3 | var tl = gsap.timeline({ 4 | scrollTrigger: { 5 | trigger: "#page1", 6 | scroller: "body", 7 | start: "top 0%", 8 | end: "top -250%", 9 | scrub: 2, 10 | pin: true 11 | } 12 | }) 13 | tl 14 | .to("#page1 h1", { 15 | transform: "translateX(-50%)", 16 | fontWeight: 100, 17 | duration: 2 18 | }) 19 | 20 | .to("#page1 h1", { 21 | transform: "translateX(-130%)", 22 | fontWeight: 900, 23 | duration: 2 24 | 25 | }) 26 | .to("#video-container", { 27 | top: "0%", 28 | delay: -1.4, 29 | duration: 2 30 | 31 | }) 32 | .to("#video-container video", { 33 | transform: "scale(1)", 34 | duration: 4 35 | 36 | }) 37 | 38 | } 39 | pageOne() 40 | function pageTwo() { 41 | var tl2 = gsap.timeline({ 42 | scrollTrigger: { 43 | trigger: "#page2", 44 | scroller: "body", 45 | // markers:true, 46 | start: "top -5%", 47 | end: "top -100%", 48 | scrub: 2, 49 | pin: true 50 | } 51 | }) 52 | tl2 53 | .from("#center #left", { 54 | y: "100%", 55 | duration: .5, 56 | opacity: 0, 57 | }) 58 | .from("#center #right", { 59 | y: "150%", 60 | opacity: 0, 61 | }) 62 | 63 | } 64 | pageTwo() 65 | function pg3() { 66 | var tl3 = gsap.timeline({ 67 | scrollTrigger: { 68 | trigger: "#page3", 69 | pin: true, 70 | scroller: "body", 71 | scrub: 4, 72 | // markers:true 73 | } 74 | }) 75 | tl3 76 | .to("#p1", { 77 | top: "10%", 78 | duration: 1.5 79 | }) 80 | .to("#p1", { 81 | top: "-50%", 82 | duration: 1.5 83 | },"a") 84 | .to("#p2", { 85 | top: "18%", 86 | duration: 1.5 87 | 88 | },"a") 89 | .to("#p2", { 90 | top: "-45%", 91 | duration: 1.5 92 | 93 | },"b") 94 | .to("#p3", { 95 | top: "26%", 96 | duration: 1.5 97 | 98 | },"b") 99 | .to("#p3", { 100 | top: "-40%", 101 | duration: 1.5 102 | 103 | },"c") 104 | .to("#p4", { 105 | top: "34%", 106 | duration: 1.5 107 | 108 | },"c") 109 | .to("#p4", { 110 | top: "-35%", 111 | duration: 1.5 112 | 113 | },"d") 114 | .to("#p5", { 115 | top: "42%", 116 | duration: 1.5 117 | 118 | },"d") 119 | } 120 | pg3() 121 | 122 | gsap.to("#main",{ 123 | backgroundColor: "black", 124 | scrollTrigger: { 125 | trigger: "#page3", 126 | scroller: "body", 127 | scrub: 1, 128 | start:"bottom 50%", 129 | // end:"top -10%", 130 | // markers:true 131 | } 132 | }) 133 | 134 | var tl4 = gsap.timeline({ 135 | scrollTrigger: { 136 | trigger: "#page4", 137 | scroller: "body", 138 | scrub: 2, 139 | start:"top -50%", 140 | // markers:true, 141 | pin:true 142 | } 143 | }); 144 | 145 | tl4 146 | .from("#page4 #video-container2",{ 147 | y:"100vh", 148 | delay:1, 149 | duration:1 150 | }) 151 | .to("#page4 #video-container2 video",{ 152 | delay:1, 153 | duration:2, 154 | transform: "scale(1)" 155 | 156 | }) 157 | 158 | 159 | var tl5 = gsap.timeline({ 160 | scrollTrigger: { 161 | trigger: "#page5", 162 | scroller: "body", 163 | scrub: 1, 164 | start:"top -90%", 165 | end:"top -100%", 166 | // markers:true 167 | } 168 | }); 169 | tl5.to("#page5",{ 170 | backgroundColor: "black", 171 | },"h") 172 | 173 | .to("#page5 .more h1,#page5 .more i",{ 174 | color: "white", 175 | },"h") 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Headingnow; 3 | src: url(./Heading-Now-Variable.ttf); 4 | } 5 | /* ===( Build By : CODE AASHU )=== */ 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | font-family: HeadingNow; 11 | } 12 | 13 | html, 14 | body { 15 | width: 100%; 16 | height: 100%; 17 | } 18 | 19 | *::selection { 20 | background-color: black; 21 | color: #fff; 22 | } 23 | 24 | #main { 25 | width: 100%; 26 | background-color: #fff; 27 | overflow: hidden; 28 | } 29 | 30 | #page1 { 31 | position: relative; 32 | height: 100vh; 33 | width: 100%; 34 | background-color: black; 35 | overflow: hidden; 36 | } 37 | 38 | #navbar { 39 | position: fixed; 40 | height: 100px; 41 | width: 100%; 42 | padding: 0 50px; 43 | padding-top: 40px; 44 | display: flex; 45 | align-items: center; 46 | justify-content: space-between; 47 | color: #fff; 48 | z-index: 99; 49 | mix-blend-mode: difference; 50 | } 51 | 52 | #navbar h2 { 53 | text-transform: uppercase; 54 | font-size: 55px; 55 | display: flex; 56 | align-items: flex-start; 57 | font-stretch: 700%; 58 | font-weight: 300; 59 | line-height: .8; 60 | animation-name: stretch; 61 | animation-duration: .9s; 62 | animation-timing-function: linear; 63 | animation-iteration-count: infinite; 64 | animation-direction: alternate; 65 | } 66 | 67 | @keyframes stretch { 68 | 0% { 69 | font-stretch: 700%; 70 | font-weight: 300; 71 | 72 | } 73 | 74 | 100% { 75 | font-stretch: 800%; 76 | font-weight: 100; 77 | 78 | } 79 | } 80 | 81 | #navbar h2 sup { 82 | font-size: 8px; 83 | } 84 | 85 | #nav-pt2 { 86 | display: flex; 87 | align-items: center; 88 | justify-content: end; 89 | gap: 100px; 90 | } 91 | 92 | #nav-pt2 a { 93 | text-decoration: none; 94 | color: #fff; 95 | text-transform: uppercase; 96 | font-size: 28px; 97 | font-weight: 300; 98 | font-stretch: 400%; 99 | } 100 | 101 | #page1 h1 { 102 | font-size: 50vw; 103 | white-space: nowrap; 104 | line-height: 1; 105 | text-transform: uppercase; 106 | color: #fff; 107 | font-stretch: 260%; 108 | font-weight: 900; 109 | padding-left: 50px; 110 | } 111 | 112 | #page1 #video-container { 113 | position: absolute; 114 | top: 100%; 115 | left: 0; 116 | height: 100%; 117 | width: 100%; 118 | z-index: 9; 119 | display: flex; 120 | align-items: center; 121 | justify-content: center; 122 | } 123 | 124 | #video-container video { 125 | height: 100%; 126 | width: 100%; 127 | object-fit: cover; 128 | transform: scale(.6); 129 | } 130 | 131 | #page2 { 132 | height: 110vh; 133 | width: 100%; 134 | background-color: #fff; 135 | display: flex; 136 | align-items: center; 137 | justify-content: center; 138 | font-family: gilroy; 139 | } 140 | 141 | #page2 #center { 142 | width: 100%; 143 | height: 70%; 144 | display: flex; 145 | align-items: center; 146 | } 147 | 148 | #center #left { 149 | height: 100%; 150 | width: 50%; 151 | display: flex; 152 | flex-direction: column; 153 | justify-content: center; 154 | padding-left: 170px; 155 | } 156 | 157 | #center #left h2 { 158 | font-family: gilroy; 159 | font-size: 6vw; 160 | line-height: .8; 161 | } 162 | 163 | #center #left #story { 164 | width: fit-content; 165 | display: flex; 166 | align-items: center; 167 | gap: 20px; 168 | } 169 | 170 | #center #left #story p { 171 | width: 50%; 172 | font-family: gilroy; 173 | } 174 | 175 | #center #right { 176 | height: 100%; 177 | width: 50%; 178 | padding-right: 170px; 179 | display: flex; 180 | flex-direction: column; 181 | align-items: flex-end; 182 | justify-content: center; 183 | } 184 | 185 | #center #right h2 { 186 | font-family: gilroy; 187 | font-size: 6vw; 188 | line-height: .8; 189 | } 190 | 191 | 192 | 193 | #page3 { 194 | min-height: 100vh; 195 | width: 100%; 196 | position: relative; 197 | display: flex; 198 | align-items: center; 199 | justify-content: center; 200 | overflow: hidden; 201 | font-family: gilroy; 202 | /* background-color: #531717; */ 203 | overflow: hidden; 204 | } 205 | 206 | .p { 207 | width: 75%; 208 | height: 75vh; 209 | position: absolute; 210 | display: flex; 211 | flex-direction: column-reverse; 212 | display: none; 213 | bottom: 0; 214 | 215 | /* background-color: red; */ 216 | 217 | } 218 | 219 | .p img { 220 | height: 95%; 221 | width: 100%; 222 | object-fit: cover; 223 | position: absolute; 224 | bottom: 0%; 225 | } 226 | 227 | .p .boxs { 228 | background-color: rgb(255, 255, 255); 229 | width: 100%; 230 | height: 5%; 231 | 232 | } 233 | 234 | #p1 { 235 | display: initial; 236 | top: 25%; 237 | /* z-index: 9999;/ */ 238 | } 239 | 240 | #p2 { 241 | top: 40%; 242 | z-index: 99; 243 | display: initial; 244 | } 245 | 246 | #p3 { 247 | top: 55%; 248 | display: initial; 249 | z-index: 99; 250 | } 251 | 252 | #p4 { 253 | top: 70%; 254 | display: initial; 255 | z-index: 99; 256 | } 257 | 258 | #p5 { 259 | top: 85%; 260 | z-index: 9999; 261 | display: initial; 262 | z-index: 99999; 263 | 264 | } 265 | 266 | 267 | #page4 { 268 | position: relative; 269 | height: 150vh; 270 | width: 100%; 271 | /* background-color: rgb(255, 255, 255); */ 272 | overflow: hidden; 273 | } 274 | .more{ 275 | height: 40vh; 276 | width: 100%; 277 | display: flex; 278 | align-items: end; 279 | justify-content: center; 280 | } 281 | .more h1{ 282 | font-family: gilroy; 283 | text-transform: uppercase; 284 | font-size: 70px; 285 | transition: all ease .5s; 286 | font-weight: 700; 287 | color: #fff; 288 | } 289 | .more i{ 290 | transition: all ease 0.3s; 291 | color: #fff; 292 | margin-left: 10px; 293 | } 294 | .more h1:hover { 295 | font-weight: 800; 296 | } 297 | .more h1:hover i{ 298 | margin-left: 25px; 299 | } 300 | #page4>h1{ 301 | color: #fff; 302 | font-size: 12vw; 303 | line-height: .8; 304 | text-align: center; 305 | font-stretch: 400%; 306 | font-weight: 700; 307 | margin-top: 170px; 308 | } 309 | #page4 h5{ 310 | color: #fff; 311 | font-family: gilroy; 312 | font-size: 18px; 313 | font-weight: 300; 314 | width: 25%; 315 | text-align: center; 316 | margin: 30px auto; 317 | line-height: 1.2; 318 | } 319 | #page4 h6{ 320 | color: #fff; 321 | font-family: gilroy; 322 | font-size: 18px; 323 | font-weight: 700; 324 | width: 25%; 325 | text-align: center; 326 | margin: 0 auto; 327 | } 328 | #video-container2{ 329 | position: absolute; 330 | bottom: 0%; 331 | width: 100%; 332 | height: 110vh; 333 | /* background-color: rebeccapurple; */ 334 | display: flex; 335 | align-items: center; 336 | justify-content: center; 337 | } 338 | #video-container2 video { 339 | height: 100%; 340 | width: 100%; 341 | object-fit: cover; 342 | transform: scale(.6); 343 | } 344 | #page5{ 345 | min-height: 150vh; 346 | width: 100%; 347 | background-color: #fff; 348 | padding: 0 180px; 349 | } 350 | #text1{ 351 | width: 100%; 352 | height: 70vh; 353 | display: flex; 354 | flex-direction: column; 355 | justify-content: end; 356 | } 357 | #text1 h1{ 358 | font-size: 13vw; 359 | font-stretch: 350%; 360 | font-weight: 800; 361 | line-height: .8; 362 | } 363 | #text1 #insight{ 364 | display: flex; 365 | align-items: end; 366 | } 367 | #insight p{ 368 | font-size: 19px; 369 | font-family: gilroy; 370 | width: 25%; 371 | margin-left: 30px; 372 | } 373 | #insight-ig{ 374 | width: 100%; 375 | height: 90vh; 376 | display: flex; 377 | justify-content: flex-start; 378 | gap: 30px; 379 | margin-top: 80px; 380 | } 381 | #insight-ig .elem{ 382 | width: 40%; 383 | height: 100%; 384 | } 385 | #insight-ig .elem img{ 386 | width: 100%; 387 | height: 90%; 388 | object-fit: cover; 389 | } 390 | #insight-ig .elem p{ 391 | font-family: gilroy; 392 | font-size: 18px; 393 | } 394 | #page5 .more { 395 | justify-content: flex-start; 396 | } 397 | #page5 .more h1{ 398 | color: black; 399 | } 400 | #page5 .more i{ 401 | color: black; 402 | } 403 | #page6{ 404 | height: 100vh; 405 | width: 100%; 406 | display: flex; 407 | flex-direction: column; 408 | justify-content: center; 409 | } 410 | 411 | #page6 h1{ 412 | color: #fff; 413 | font-size: 12vw; 414 | line-height: .9; 415 | text-align: center; 416 | font-stretch: 400%; 417 | font-weight: 700; 418 | } 419 | #page6 h5{ 420 | color: #fff; 421 | font-family: gilroy; 422 | font-size: 18px; 423 | font-weight: 300; 424 | width: 25%; 425 | text-align: center; 426 | margin: 30px auto; 427 | line-height: 1.2; 428 | } 429 | #page6 h6{ 430 | color: #fff; 431 | font-family: gilroy; 432 | font-size: 18px; 433 | font-weight: 700; 434 | width: 25%; 435 | text-align: center; 436 | margin: 0 auto; 437 | } 438 | 439 | #footer{ 440 | height: 100vh; 441 | width: 100%; 442 | background-color: #fff; 443 | display: flex; 444 | overflow: hidden; 445 | padding: 20px; 446 | } 447 | 448 | #footer #left{ 449 | height: 100%; 450 | width: 50%; 451 | /* background-color: yellow; */ 452 | padding: 30px; 453 | display: flex; 454 | flex-direction: column; 455 | justify-content: space-between; 456 | } 457 | #footer #left p{ 458 | font-family: gilroy; 459 | width: 60%; 460 | font-size: 18px; 461 | } 462 | #footer #left h1{ 463 | font-size: 16vw; 464 | font-stretch: 700%; 465 | text-transform: uppercase; 466 | line-height: .8; 467 | font-weight: 400; 468 | display: flex; 469 | align-items: start; 470 | } 471 | #footer #left h1 sup{ 472 | font-size: 10px; 473 | font-weight: 600; 474 | } 475 | #footer #right{ 476 | height: 100%; 477 | width: 50%; 478 | display: flex; 479 | flex-direction: column; 480 | justify-content: center; 481 | } 482 | #footer #right .row{ 483 | height: 50%; 484 | width: 100%; 485 | display: flex; 486 | } 487 | #footer #right .row #mail{ 488 | height: 100%; 489 | width: 50%; 490 | } 491 | #right .row #mail #home{ 492 | height: 50%; 493 | width: 100%; 494 | display: flex; 495 | } 496 | #right .row #mail #home h4{ 497 | font-family: gilroy; 498 | font-size: 20px; 499 | text-transform: uppercase; 500 | text-align: left; 501 | font-weight: 500; 502 | } 503 | #mail #home #lf{ 504 | width: 50%; 505 | height: 100%; 506 | } 507 | #mail #home #rt{ 508 | width: 50%; 509 | height: 100%; 510 | } 511 | #right .row #mail >h4{ 512 | color: #fff; 513 | font-stretch: 500%; 514 | text-transform: uppercase; 515 | font-size: 30px; 516 | font-weight: 400; 517 | margin-top: 40px; 518 | } 519 | #right .row #mail >input{ 520 | font-size: 20px; 521 | font-family: gilroy; 522 | font-weight: 500; 523 | width: 90%; 524 | padding: 12px; 525 | border: none; 526 | outline: none; 527 | border-bottom: 2px solid rgb(0, 0, 0); 528 | background-color: transparent; 529 | color: #fff; 530 | } 531 | #footer #right .row #social{ 532 | height: 100%; 533 | width: 50%; 534 | } 535 | #social h4{ 536 | font-family: gilroy; 537 | font-size: 20px; 538 | text-transform: uppercase; 539 | text-align: left; 540 | font-weight: 500; 541 | } 542 | 543 | @media (max-width:600px) { 544 | 545 | 546 | #navbar { 547 | padding: 0 20px; 548 | } 549 | 550 | #navbar h2 { 551 | font-size: 25px; 552 | } 553 | 554 | #navbar h2 sup { 555 | font-size: 5px; 556 | } 557 | 558 | #nav-pt2 a { 559 | display: none; 560 | font-size: 20px; 561 | } 562 | #nav-pt2 a:nth-child(3){ 563 | display: block; 564 | } 565 | #page1 h1 { 566 | margin-top: 250px; 567 | padding-left: 20px; 568 | } 569 | #page2 #center { 570 | flex-direction: column; 571 | } 572 | 573 | #center #left { 574 | height: 50%; 575 | width: 100%; 576 | flex-direction: column; 577 | padding-left: 20px; 578 | } 579 | 580 | #center #left h2 { 581 | font-size: 12vw; 582 | } 583 | 584 | #center #left #story { 585 | gap: 5px; 586 | } 587 | 588 | #center #left #story p { 589 | width: 80%; 590 | font-size: 10px; 591 | } 592 | 593 | #center #right { 594 | height: 50%; 595 | width: 100%; 596 | padding-right: 20px; 597 | } 598 | 599 | #center #right h2 { 600 | font-size: 12vw; 601 | } 602 | .more h1{ 603 | font-size: 30px; 604 | } 605 | 606 | #page4>h1{ 607 | font-size: 13vw; 608 | line-height: .9; 609 | font-stretch: 500%; 610 | margin-top: 300px; 611 | } 612 | #page4 h5{ 613 | font-size: 14px; 614 | font-weight: 500; 615 | width: 100%; 616 | } 617 | #page4 h6{ 618 | width: 50%; 619 | } 620 | 621 | 622 | #page5{ 623 | padding: 0 20px; 624 | } 625 | #text1{ 626 | height: 35vh; 627 | } 628 | #text1 h1{ 629 | font-size: 18vw; 630 | line-height: 1; 631 | } 632 | #text1 #insight{ 633 | display: flex; 634 | flex-direction: column; 635 | align-items: flex-start; 636 | } 637 | #insight p{ 638 | font-size: 12px; 639 | width: 80%; 640 | margin-left: 0px; 641 | margin-top: 10px; 642 | } 643 | #insight-ig{ 644 | width: 100%; 645 | height: 150vh; 646 | flex-direction: column; 647 | margin-top: 30px; 648 | } 649 | #insight-ig .elem{ 650 | width: 100%; 651 | height: 50%; 652 | } 653 | #insight-ig .elem p{ 654 | font-size: 12px; 655 | } 656 | #page5 .more{ 657 | height: 10vh; 658 | } 659 | #page6 h1{ 660 | font-size: 15vw; 661 | font-stretch: 500%; 662 | font-weight: 600; 663 | } 664 | #page6 h5{ 665 | font-size: 15px; 666 | font-weight: 300; 667 | width: 100%; 668 | line-height: 1.2; 669 | } 670 | #page6 h6{ 671 | width: 50%; 672 | } 673 | 674 | 675 | #footer{ 676 | min-height: 100vh; 677 | flex-direction: column; 678 | padding: 20px; 679 | } 680 | 681 | #footer #left{ 682 | height: 50%; 683 | width: 100%; 684 | padding: 0px; 685 | } 686 | #footer #left p{ 687 | font-family: gilroy; 688 | width: 100%; 689 | font-size: 13px; 690 | } 691 | #footer #left h1{ 692 | font-size: 25vw; 693 | line-height: .9; 694 | } 695 | #footer #right{ 696 | height: 50%; 697 | width: 100%; 698 | } 699 | 700 | #footer #right .row{ 701 | gap: 40px; 702 | } 703 | #right .row #mail #home h4{ 704 | font-size: 16px; 705 | } 706 | #right .row #mail >h4{ 707 | font-size: 20px; 708 | color: black; 709 | margin-top: 30px; 710 | } 711 | #right .row #mail >input{ 712 | font-size: 15px; 713 | padding: 12px; 714 | border-bottom: 1px solid rgb(0, 0, 0); 715 | } 716 | #social h4{ 717 | font-size: 16px; 718 | } 719 | } --------------------------------------------------------------------------------