├── 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 |
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 |
41 |
INTO
42 | A BRAND
43 | THAT LASTS
44 |
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 | }
--------------------------------------------------------------------------------
facebook
151 |instagram
152 |linkedin
153 |behance
154 |pinterest
155 |