├── README.md
├── Gilroy-Medium.woff
├── script.js
├── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # CUE
2 | MODERN Animated WOMEN Salon websites Design
3 | 


--------------------------------------------------------------------------------
/Gilroy-Medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/CUE/HEAD/Gilroy-Medium.woff


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | /* ===( Creative 💌 : CODE AASHU )=== */
  2 | function loco(){
  3 |     gsap.registerPlugin(ScrollTrigger);
  4 | 
  5 |     // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
  6 |     
  7 |     const locoScroll = new LocomotiveScroll({
  8 |       el: document.querySelector("#main"),
  9 |       smooth: true
 10 |     });
 11 |     // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
 12 |     locoScroll.on("scroll", ScrollTrigger.update);
 13 |     
 14 |     // tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
 15 |     ScrollTrigger.scrollerProxy("#main", {
 16 |       scrollTop(value) {
 17 |         return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
 18 |       }, // we don't have to define a scrollLeft because we're only scrolling vertically.
 19 |       getBoundingClientRect() {
 20 |         return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
 21 |       },
 22 |       // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
 23 |       pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
 24 |     });
 25 |     
 26 |     
 27 |     
 28 |     // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
 29 |     ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
 30 |     
 31 |     // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
 32 |     ScrollTrigger.refresh();
 33 |     
 34 | }
 35 | loco()
 36 | 
 37 | function loader(){
 38 |   var tll = gsap.timeline()
 39 | tll
 40 | .to("#loader",{
 41 |   top:"-100%",
 42 |   duration:1,
 43 |   delay:0.5,
 44 |   ease: "power3.out",
 45 | })
 46 | .to("#center",{
 47 |   clipPath: "polygon(0 100%, 100% 100%, 100% 0%, 0 0%)",
 48 | })
 49 | .from("#navbar",{
 50 |   y:"-100%"
 51 | })
 52 | 
 53 | }
 54 | loader()
 55 | 
 56 | 
 57 | function page1(){
 58 |   var tl = gsap.timeline({
 59 |     scrollTrigger:{
 60 |         trigger:"#page1",
 61 |         scroller:"#main",
 62 |         start:"top -25%",
 63 |         end:"top -200%",
 64 |         scrub:1,
 65 |         pin:true
 66 |     }
 67 | })
 68 | tl
 69 | .to("#center img",{
 70 |     transform: "scale(1)"
 71 | },"a")
 72 | .to("#center",{
 73 |     scale:.8
 74 | },"a")
 75 | .to("#head-1",{
 76 |     top:"-100%"
 77 | },"a")
 78 | .to("#left",{
 79 |   transform:"translateY(-7.8%)"
 80 | },"b")
 81 | .to("#right",{
 82 |   transform:"translateY(5%)"
 83 | },"b")
 84 | }
 85 | page1()
 86 | 
 87 | function page2(){
 88 |   var tl2 = gsap.timeline({
 89 |     scrollTrigger:{
 90 |       trigger:"#page2",
 91 |       scroller:"#main",
 92 |       start:"top 30%",
 93 |       end:"top -20%",
 94 |       scrub:3,
 95 |     }
 96 |   })
 97 |   tl2
 98 |   .from("#cue",{
 99 |     x:600
100 |   },"a")
101 |   .from("#page2 #the",{
102 |     x:-500,
103 |     delay:0.1
104 |   },"a")
105 |   .from("#page2>h1",{
106 |     x:400,
107 |     delay:0.3
108 |   },"a")
109 |   
110 |   var clutter = ""
111 |   document.querySelector("#page2 #text h2").textContent.split(" ").forEach(function(word){
112 |     clutter += ` <span>${word}</span>`
113 |   })
114 |   document.querySelector("#page2 #text h2").innerHTML = clutter
115 |   
116 |   
117 |   gsap.to("#page2 #text h2 span",{
118 |     color:"#FF3227",
119 |     stagger:0.2,
120 |     scrollTrigger:{
121 |       trigger:"#text",
122 |       scroller:"#main",
123 |       start:"top 50%",
124 |       end:"top 10%",
125 |       scrub:1,
126 |     }
127 |   })
128 |   
129 | }
130 | page2()
131 | 
132 |   gsap.from("#page3 h1",{
133 |     y:"100%",
134 |     stagger:{
135 |       amount:0.5
136 |     },
137 |     scrollTrigger:{
138 |       trigger:"#page3",
139 |       scroller:"#main",
140 |       start:"top 50%",
141 |       end:"top 20%",
142 |       scrub:1,
143 |     }
144 |   })
145 | 
146 | 
147 |   gsap.to("#page4 #wraper",{
148 |     transform:"translateX(-200%)",
149 |     scrollTrigger:{
150 |       trigger:"#page4",
151 |       scroller:"#main",
152 |       start:"top top",
153 |       end:"top -300%",
154 |       scrub:1,
155 |       pin:true,
156 |     }
157 |   })
158 | 
159 |  
160 |   gsap.to("#page6 #ig2",{
161 |     clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
162 |     ease: "power4.out",
163 |     duration:2,
164 |     scrollTrigger:{
165 |       trigger:"#page6",
166 |       scroller:"#main",
167 |       start:"top 50%",
168 |       end:"top 30%",
169 |       scrub:1
170 |     }
171 |   })
172 | 
173 |   gsap.to("#page6 #ig1",{
174 |     clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
175 |     ease: "power4.out",
176 |     duration:2,
177 |     scrollTrigger:{
178 |       trigger:"#page6 #ig1",
179 |       scroller:"#main",
180 |       start:"top 50%",
181 |       end:"top 30%",
182 |       scrub:1
183 |     }
184 |   })
185 | 
186 | 
187 |   function page7(){
188 |   var tl7 = gsap.timeline({
189 |     scrollTrigger:{
190 |       trigger:"#page7",
191 |       scroller:"#main",
192 |       start:"top 50%",
193 |       end:"top -60%",
194 |       scrub:1,
195 |     }
196 |   })
197 |   tl7
198 |   .to("#i1",{
199 |     x:-10
200 |   },"a")
201 |   .to("#one",{
202 |     x:350,
203 |     delay:0.5
204 |   },"a")
205 |   .to("#two",{
206 |     x:350,
207 |     delay:0.7
208 |   },"a")
209 |   .to("#three",{
210 |     x:-300,
211 |     delay:0.8
212 |   },"a")
213 | }
214 | page7()


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |     font-family: gilroy;
  3 |     src: url(./Gilroy-Medium.woff);
  4 | }
  5 | /* ===( Creative 💌 : CODE AASHU )=== */
  6 | *{
  7 | margin: 0;
  8 | padding: 0;
  9 | box-sizing: border-box;
 10 | font-family: gilroy;
 11 | }
 12 | html, body{
 13 | width: 100%;
 14 |  height: 100%;
 15 | }
 16 | #loader{
 17 |     height: 100vh;
 18 |     width: 100%;
 19 |     background-color: #FF3227;
 20 |     position: absolute;
 21 |     top: 0;
 22 |     left: 0;
 23 |     z-index: 9;
 24 | }
 25 | #navbar{
 26 |     position: absolute;
 27 |     top: 0;
 28 |     left: 0;
 29 |     width: 100%;
 30 |     display: flex;
 31 |     align-items: center;
 32 |     justify-content: space-between;
 33 |     padding:1.2vw 1vw;
 34 |     z-index: 8;
 35 |     background-color: #FFF9EC;
 36 | 
 37 | }
 38 | #navbar h3{
 39 |     color: #FF3227;
 40 |     text-transform: uppercase;
 41 |     font-size: 1vw;
 42 |     font-weight: 600;
 43 | }
 44 | #navbar img{
 45 |     position: absolute;
 46 |     left: 50%;
 47 |     transform: translateX(-50%);
 48 |     height: 2vw;
 49 | }
 50 | #main{
 51 |     overflow: hidden;
 52 |     background-color: #FFF9EC;
 53 | 
 54 | }
 55 | #page1{
 56 |     position: relative;
 57 |     min-height: 150vh;
 58 |     width: 100%;
 59 | }
 60 | #head-1{
 61 |     position: absolute;
 62 |     height: 130vh;
 63 |     width: 100%;
 64 | }
 65 | #head-1 img{
 66 |     position: absolute;
 67 |     left: 50%;
 68 |     transform: translate(-50%,-20%);
 69 |     width: 120%;
 70 | }
 71 | #head-1 h4{
 72 |     position: absolute;
 73 |     font-size: 5.5vw;
 74 |     text-transform: uppercase;
 75 |     letter-spacing: 5px;
 76 |     font-weight: 600;
 77 |     color: #FF3227;
 78 |     z-index: 1;
 79 | }
 80 | #head-1 h4:nth-child(2){
 81 |     top: 60%;
 82 |     left: 25%;
 83 | }
 84 | 
 85 | #head-1 h4:nth-child(3){
 86 |     top: 70%;
 87 |     left: -2%;
 88 | }
 89 | #head-1 h4:nth-child(4){
 90 |     top: 80%;
 91 |     left: 75%;
 92 | }
 93 | #head-1 h4:nth-child(5){
 94 |     top: 90%;
 95 |     left: 45%;
 96 | }
 97 | #head-2{
 98 |     height: 130vh;
 99 |     width: 100%;
100 |     position: absolute;
101 |     bottom: 0;
102 |     left: 0;
103 |     display: flex;
104 |     align-items: center;
105 |     justify-content: space-between;
106 |     overflow: hidden;
107 | }
108 | #center{
109 |     width: 42%;
110 |     height: 85%;
111 |     position: absolute;
112 |     top: 0;
113 |     left: 50%;
114 |     transform: translate(-50%,0%);
115 |     overflow: hidden;
116 |     clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
117 | 
118 | }
119 | #head-2 #txt-c{
120 |     position: absolute;
121 |     left: 50%;
122 |     transform: translateX(-50%);
123 |     bottom: 0;
124 |     width: 33.5%;
125 |     height: 14vw;
126 |     display: flex;
127 |     align-items: center;
128 |     justify-content: center;
129 | }
130 | #head-2 #txt-c h3{
131 |     color: #FF3227;
132 |     font-weight: 600;
133 |     font-size: 1.1vw;
134 | }
135 | #center img{
136 |     height: 100%;
137 |     width: 100%;
138 |     object-fit: cover;
139 |     transform: scale(2);
140 |     transform-origin: center;
141 | }
142 | #head-2 .strip{
143 |     width: 31.5%;
144 |     min-height: 100vh;
145 |     display: flex;
146 |     flex-direction: column;
147 |     gap: 1.5vw;
148 | }
149 | #head-2 #left{
150 |     transform: translateY(100%);
151 | }
152 | #head-2 #right{
153 |     transform: translateY(-100%);
154 | }
155 | #head-2 .strip img{
156 |     width: 100%;
157 |     object-fit: cover;
158 | }
159 | #head-2 #left img:nth-child(1){
160 |     height: 40vw
161 | }
162 | #head-2 .strip div{
163 |     width: 100%;
164 |     height: 16vw;
165 | }
166 | #page2{
167 |     height: 140vh;
168 |     width: 100%;
169 |     display: flex;
170 |     align-items: center;
171 |     justify-content:flex-start;
172 |     flex-direction: column;
173 |     padding: 0 3vw;
174 |     padding-top: 13vw;
175 | }
176 | #page2 h1{
177 |     text-transform: uppercase;
178 |     color: #FF3227;
179 |     font-size: 9vw;
180 |     font-weight: 600;
181 |     line-height: 1.1;
182 | }
183 | #page2 #the{
184 |     display: flex;
185 |     align-items: center;
186 |     gap: 1vw;
187 | }
188 | #page2 #text{
189 |     margin-top:12vw;
190 | }
191 | #page2 #text h2{
192 |     font-size: 2.8vw;
193 |     color: #ff322729;
194 |     font-weight: 600;
195 | }
196 | #page3{
197 |     height: 100vh;
198 |     width: 100%;
199 |     background-color: #FF3227;
200 |     padding: 8vw 3vw;
201 | }
202 | #page3 h1{
203 |     color: #FFF9EC;
204 |     font-size: 9vw;
205 |     font-weight: 600;
206 |     line-height: 1;
207 | }
208 | #page3 .wrap{
209 |     height: 9vw;
210 |     overflow: hidden;
211 | }
212 | #page4{
213 |     height: 120vh;
214 |     width: 100%;
215 |     background-color: #FF3227;
216 | }
217 | #wraper{
218 |     height: 100vh;
219 |     width: 100%;
220 |     padding: 4vw 0 1vw 3vw;
221 |     display: flex;
222 |     gap: 2vw;
223 | }
224 | .part-1{
225 |     flex-shrink: 0;
226 |     width: 100%;
227 |     height: 100%;
228 |     display: flex;
229 |     align-items: center;
230 |     gap: 2vw;
231 | }
232 | .part-1 .elem1{
233 |     width: 65%;
234 |     height: 100%;
235 |     color: #FFF9EC;
236 | }
237 | .part-1 .elem2{
238 |     width: 35%;
239 |     height: 100%;
240 | }
241 | .part-1 .elem1 .div-1{
242 |     width: 100%;
243 |     height: 25%;
244 | }
245 | 
246 | .part-1 .elem1 .div-2{
247 |     width: 100%;
248 |     height: 75%;
249 |     display: flex;
250 |     align-items: center;
251 | }
252 | .part-1 .elem1 .div-2 .lf{
253 |     width: 60%;
254 |     height: 100%;
255 |     display: flex;
256 |     flex-direction: column;
257 |     justify-content: space-between;
258 | }
259 | .part-1 h5{
260 |     text-transform: uppercase;
261 | }
262 | .part-1 .elem1 .div-2 .rt{
263 |     width: 40%;
264 |     height: 100%;
265 |     background-image: url(https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee19_woman%20with%20gum.webp);
266 | }
267 | .part-1:nth-child(3) .elem1 .div-2 .rt{
268 |     background-image: url(https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee39_A1A00025%20copy.webp);
269 | }
270 | .part-1:nth-child(3) .elem1 .div-2 .lf{
271 |     align-items: end;
272 | }
273 | .part-1 h2{
274 |     font-size: 2.5vw;
275 |     font-weight: 600;
276 | }
277 | 
278 | .part-1 .elem2 img{
279 |     height: 100%;
280 |     width: 100%;
281 |     object-fit: cover;
282 | }
283 | .part-1:nth-child(2) .elem1{
284 |     display: flex;
285 | }
286 | .part-1:nth-child(2) .div-11{
287 | width: 58%;
288 | height: 100%;
289 | padding-right: 2vw;
290 | display: flex;
291 | flex-direction: column;
292 | justify-content: space-between;
293 | }
294 | .part-1:nth-child(2) .div-22{
295 |     width: 42%;
296 |     height: 100%;
297 |     }
298 | .part-1:nth-child(2) .div-22 img{
299 |     width: 100%;
300 |     object-fit: cover;
301 | }
302 | #page5{
303 |     height: 80vh;
304 |     width: 100%;
305 |     padding:7vw 3vw;
306 | }
307 | #page5 h1{
308 |     color: #FF3227;
309 |     font-size: 9vw;
310 |     font-weight: 600;
311 |     line-height: 1;
312 | }
313 | #page5 div{
314 |     display: flex;
315 |     gap: 1.5vw;
316 | }
317 | .page-same{
318 |     min-height: 100vh;
319 |     width: 100%;
320 |     background-color: #FFF9EC;
321 |     padding:0 3vw;
322 |     display: flex;
323 |     align-items: center;
324 |     color: #FF3227;
325 | }
326 | .page-same .elem{
327 |     width: 50%;
328 |     height: 125vh;
329 | }
330 | .page-same .elem:nth-child(1){
331 |     padding-right: 2vw;
332 | }
333 | 
334 | .page-same .elem:nth-child(1) h5{
335 |     margin-top: 20vw;
336 |     margin-bottom: 1.5vw;
337 | }
338 | .page-same .elem:nth-child(1) img{
339 |     width: 65%;
340 |     object-fit: cover;
341 | }
342 | #page6 .elem:nth-child(1) img{
343 |     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
344 | 
345 | }
346 | #page6 .elem:nth-child(2) img{
347 |     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
348 | 
349 | }
350 | .page-same .elem:nth-child(2) img{
351 |     width: 100%;
352 |     object-fit: cover;
353 | }
354 | .page-same h2{
355 |     font-size: 2.5vw;
356 | }
357 | .page-same .elem:nth-child(2) h2{
358 |     margin: 8vw 0 0;
359 | }
360 | #page7{
361 |     position: relative;
362 |     height: 150vh;
363 |     width: 100%;
364 |     background-color: #FFF9EC;
365 |     padding: 8vw 2vw;
366 | }
367 | #page7 #i1{
368 |     width: 70%;
369 |     transform: translateX(70%);
370 | }
371 | #page7 #i2{
372 |     width: 60%;
373 |     height: 40vw;
374 |     object-fit: cover;
375 |     position: absolute;
376 |     top: 50%;
377 |     left: 50%;
378 |     transform: translate(-50%,-50%);
379 | }
380 | #page7 h1{
381 |     position: absolute;
382 |     color: #FF3227;
383 |     font-size: 5vw;
384 |     font-weight: 600;
385 | }
386 | #page7 h1:nth-child(4){
387 |     top: 55%;
388 |     left: 15%;
389 | }
390 | #page7 h1:nth-child(5){
391 |     top: 65%;
392 |     right: 5%;
393 | }
394 | #page9{
395 |     height: 120vh;
396 |     width: 100%;
397 |     background-color: #FFF9EC;
398 |     padding: 10vw 3vw;
399 |     display: flex;
400 | }
401 | #page9 .pt{
402 |     width: 50%;
403 |     height: 100%;
404 |     display: flex;
405 |     flex-direction: column;
406 |     justify-content: space-between;
407 |     color: #FF3227;
408 | }
409 | #page9 h2{
410 |     font-size: 2.5vw;
411 |     font-weight: 600;
412 |     line-height: 1.1;
413 | }
414 | #page9 .pt:nth-child(1){
415 |     padding-right: 2vw;
416 | }
417 | #page9 .pt:nth-child(2) img{
418 |     height: 100%;
419 |     width: 100%;
420 |     object-fit: cover;
421 |     object-position: top;
422 | }
423 | #page10{
424 |     min-height: 100vh;
425 |     width: 100%;
426 |     background-color: #FF3227;
427 |     color: #FFF9EC;
428 |     padding:6vw 3vw 0;
429 | }
430 | #page10 h1{
431 |     font-size: 9vw;
432 |     line-height: 1;
433 |     font-weight: 600;
434 | }
435 | #page10 #container{
436 |     width: 100%;
437 |     height: 110vh;
438 |     margin-top: 5vw;
439 |     display: flex;
440 |     align-items: center;
441 |     justify-content: space-between;
442 | }
443 | #page10 #container .img-div{
444 |     width: 32%;
445 |     height: 100%;
446 | }
447 | #container .img-div .img{
448 |     width: 100%;
449 |     height: 90%;
450 |     overflow: hidden;
451 | }
452 | #container .img-div h2{
453 |     text-transform: uppercase;
454 |     font-size: 2.5vw;
455 |     margin-top: 2vw;
456 | }
457 | #container .img-div .img img{
458 |     height: 100%;
459 |     width: 100%;
460 |     object-fit: cover;
461 |     transition: all ease 0.5s;
462 | }
463 | #container .img-div .img:hover img{
464 |     transform: scale(1.2);
465 | }
466 | #page11{
467 |     height: 100vh;
468 |     width: 100%;
469 |     display: flex;
470 | }
471 | #page11 .slide{
472 |     height: 100%;
473 |     width: fit-content;
474 |     display: flex;
475 |     animation-name: slide;
476 |     animation-duration: 10s;
477 |     animation-timing-function: linear;
478 |     animation-iteration-count: infinite;
479 | }
480 | #page11 .slide img{
481 |     flex-shrink: 0;
482 |     width: 50vw;
483 |     height: 100%;
484 |     object-fit: cover;
485 | }
486 | @keyframes slide {
487 |     0%{
488 |         transform: translateX(0%);
489 |     }
490 |     100%{
491 |         transform: translateX(-100%);
492 |     }
493 | }
494 | 
495 | #page12{
496 |     height: 100vh;
497 |     width: 100%;
498 |     background-color: #FFF9EC;
499 |     padding: 6vw 3vw;
500 |     color: #FF3227;
501 | }
502 | 
503 | #page12 h1{
504 |     font-size: 5vw;
505 |     line-height: 1.1;
506 |     font-weight: 600;
507 | }
508 | #page12 .elm:nth-child(4){
509 |     margin-top: 10vw;
510 |     border-top: 1px solid #ff3227b9;
511 |     border-bottom: 1px solid #ff3227b9;
512 | }
513 | #page12 .elm:nth-child(5){
514 |     border-bottom: 1px solid #ff3227b9;
515 | 
516 | }
517 | #page12 .elm{
518 |     width: 100%;
519 |     height: 7vw;
520 |     display: flex;
521 |     align-items: center;
522 |     justify-content: space-between;
523 | }
524 | #page12 .elm div{
525 |     height: 2.5vw;
526 |     overflow: hidden;
527 | }
528 | #page12 .elm h2{
529 |     text-transform: uppercase;
530 |     font-size: 2.2vw;
531 |     font-weight: 600;
532 |     transition: all ease 0.4s;
533 | }
534 | #page12 .elm:hover h2{
535 |     transform: translateY(-100%);
536 | }
537 | 
538 | #footer{
539 |     position: relative;
540 |     height: 65vh;
541 |     width: 100%;
542 |     background-color: #FFF9EC;
543 |     overflow: hidden;
544 | }
545 | #footer img{
546 |     position: absolute;
547 |     top: -35%;
548 |     left: 50%;
549 |     transform: translateX(-50%);
550 |     width: 100%;
551 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <!-- ===( Creative 💌 : CODE AASHU )=== -->
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Cue | Let's get it on</title>
  8 |     <link href="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee2f_favicon%20(2).png" rel="shortcut icon" type="image/x-icon">
  9 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
 10 |     <link rel="stylesheet" href="style.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <div id="loader"></div>
 15 |     <div id="main">
 16 |         <div id="page1">
 17 |             <div id="navbar">
 18 |                 <h3>homr</h3>
 19 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee16_logo%20shorter.svg" alt="">
 20 |                 <h3>BOOK CONSULTATION +</h3>
 21 |             </div>
 22 |             <div id="head-1">
 23 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee16_logo%20shorter.svg"
 24 |                     alt="">
 25 |                 <h4>let's</h4>
 26 |                 <h4>get</h4>
 27 |                 <h4>it</h4>
 28 |                 <h4>on</h4>
 29 |             </div>
 30 |             <div id="head-2">
 31 |                 <div id="left" class="strip">
 32 |                     <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee3f_woman%2520telephone-p-800.webp"
 33 |                         alt="">
 34 |                     <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee43_woman%2520green%2520shirt-p-800.webp"
 35 |                         alt="">
 36 |                     <div></div>
 37 |                 </div>
 38 |                 <div id="center">
 39 |                     <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee44_main%2520imag-p-2000.webp"
 40 |                         alt="">
 41 |                 </div>
 42 |                 <div id="txt-c">
 43 |                     <h3>CUE THE MAGIC</h3>
 44 |                 </div>
 45 |                 <div id="right" class="strip">
 46 |                     <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee3d_woman%2520orange%2520headphones-p-800.webp"
 47 |                         alt="">
 48 |                     <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee3e_woman%2520pink%2520bg-p-800.webp"
 49 |                         alt="">
 50 |                 </div>
 51 |             </div>
 52 |         </div>
 53 |         <div id="page2">
 54 |             <img id="cue"
 55 |                 src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee16_logo%20shorter.svg"
 56 |                 alt="">
 57 |             <div id="the">
 58 |                 <h1>the</h1>
 59 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee17_eyes.webp"
 60 |                     alt="">
 61 |             </div>
 62 |             <h1>APPLAUSE</h1>
 63 |             <div id="text">
 64 |                 <h2>A CULMINATION OF DECADES OF EXPERIENCE BY OUR CUE WORLD-CLASS TEAM, THAT MATERIALIZES IN A FLAWLESS PIECE OF WEARABLE ART THAT DISAPPEARS FROM YOUR THOUGHTS THE SECOND IT’S ON YOUR HEAD.</h2>
 65 |             </div>
 66 |         </div>
 67 |         <div id="page3">
 68 |             <div class="wrap">
 69 |                 <h1>WE’RE NOT</h1>
 70 |             </div>
 71 |             <div class="wrap">
 72 |                 <h1>CHANGING THE</h1>
 73 |             </div>
 74 |             <div class="wrap">
 75 |                 <h1>WORLD, WE SELL</h1>
 76 |             </div>
 77 |             <div class="wrap">
 78 |                 <h1>WIGS.</h1>
 79 |             </div>
 80 |         </div>
 81 |         <div id="page4">
 82 |             <div id="wraper">
 83 |                 <div class="part-1">
 84 |                     <div class="elem1">
 85 |                         <div class="div-1">
 86 |                          <h2>BUT TO US, THE CRAFTERS OF ONE OF THE MOST INTIMATE PARTS OF YOUR LIFE, YOU ARE OUR WORLD.</h2>
 87 |                         </div>
 88 |                         <div class="div-2">
 89 |                             <div class="lf">
 90 |                                 <h5>read more</h5>
 91 |                                 <h5>more about cue</h5>
 92 |                             </div>
 93 |                             <div class="rt"></div>
 94 |                         </div>
 95 |                     </div>
 96 |                     <div class="elem2">
 97 |                         <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee18_woman%20with%20headphones.webp" alt="">
 98 |                     </div>
 99 |                 </div>
100 |                 <div class="part-1">
101 |                     <div class="elem1">
102 |                         <div class="div-11">
103 |                             <div>
104 |                                 <h2>SO YES, PEOPLE MAY THINK WE GO OVERBOARD WHEN WE HANDPICK EVERY STRAND OF HAIR BEFORE WE START CREATING YOUR WIG.</h2>
105 |                                 <p>Or that we do all the construction, customization and coloring ourselves, even carrying every size and style in stock at all times to ensure the wig you try on is the wig you walk out with. Because we believe you deserve a wig that's as perfect as you are</p>
106 |                             </div>
107 |                             <h5>read more</h5>
108 |                            </div>
109 |                         <div class="div-22">
110 |                             <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee3c_A1A01407%20copy.webp" alt="">
111 |                         </div>
112 |                     </div>
113 |                     <div class="elem2">
114 |                         <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee3a_A1A00375%20copy%20(2).webp" alt="">
115 |                     </div>
116 |                 </div>
117 |                 <div class="part-1">
118 |                     <div class="elem1">
119 |                         <div class="div-1">
120 |                          <h2>BECAUSE WE BELIEVE YOU DESERVE A WIG THAT'S AS PERFECT AS YOU ARE.</h2>
121 |                         </div>
122 |                         <div class="div-2">
123 |                             <div class="rt"></div>
124 |                             <div class="lf">
125 |                                 <h5>read more</h5>
126 |                                 <h5>more about cue</h5>
127 |                             </div>
128 |                         </div>
129 |                     </div>
130 |                     <div class="elem2">
131 |                         <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee3b_A1A02096%20copy%20(1).webp" alt="">
132 |                     </div>
133 |                 </div>
134 |             </div>
135 |         </div>
136 |         <div id="page5">
137 |             <h1>HERE’S</h1>
138 |             <div>
139 |                 <h1>YOUR</h1>
140 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee16_logo%20shorter.svg" alt="">
141 |             </div>
142 |         </div>
143 |         <div id="page6" class="page-same">
144 |             <div class="elem">
145 |                 <h2>IT ALL STARTS WITH HAIR, THE HIGHEST QUALITY EUROPEAN HAIR</h2>
146 |                 <p>To be precise, that we purchase on a head-by-head basis ensuring that we know exactly who and where it’s coming from.</p>
147 |                 <h5>HAIR AND NOW</h5>
148 |                 <img id="ig1"  src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee45_woman%2520yellow%2520jacket-p-500.webp" alt="">
149 |             </div>
150 |             <div class="elem">
151 |                 <img id="ig2" src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4c_woman%2520eating%2520string-p-1080.webp" alt="">
152 |                <h5>GOOD MUSIC</h5>
153 |                <h2>BASED ON WHAT THE PIECE WILL BECOME</h2>
154 |                <p>We match length, texture, and color and begin to prep it for the next step. An average of five heads go into creating the one that will sit so beautifully on yours.  </p>
155 |             </div>
156 |         </div>
157 |         <div id="page7">
158 |             <img id="i1" src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee16_logo%20shorter.svg" alt="">
159 |             <img id="i2" src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4b_woman%2520shirt%2520green%2520big-p-1080.webp" alt="">
160 |              <h1 id="one">FALL</h1>
161 |              <h1 id="two">HEAD</h1>
162 |              <h1 id="three">FIRST</h1>
163 |         </div>
164 |         <div id="page8" class="page-same">
165 |             <div class="elem">
166 |                 <h2>HERE COMES THE CAP, OR THE CANVAS AS WE CALL IT</h2>
167 |                 <p>Made with the lightest weight Swiss lace for ultimate comfort, and the most natural flow. We use lace that goes wider and deeper for hair that sits tightly, naturally, and above all comfortably. </p>
168 |                 <h5>HEADS UP</h5>
169 |                 <img id="ig1"  src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4a_woman%2520wigs%2520orange-p-500.webp" alt="">
170 |             </div>
171 |             <div class="elem">
172 |                 <img id="ig2" src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee49_woman%2520telephone%2520yellow-p-1080.webp" alt="">
173 |                <h5>FROM MATCHING TO CRAFTING</h5>
174 |                <h2>NOW THAT THE CAP IS CRAFTED AND THE HAIR IS ASSEMBLED</h2>
175 |                <p>Our world-class threaders bring them together in harmony.  Each hair is carefully sown into place one by one, line by line, over several days, until the piece is complete. </p>
176 |             </div>
177 |         </div>
178 |         <div id="page9">
179 |             <div class="pt">
180 |                 <h5>WIGS BY ESTY</h5>
181 |                 <div>
182 |                     <h2>WITH THE AMOUNT OF WORK THAT GOES INTO  EVERY PIECE, WE HAVE DECIDED TO WORK WITH ONLY ONE SALON WE TRUST.</h2>
183 |                     <p>We work with BY ESTY because we know they will treat, color, cut, and style every one of our wigs correctly so that for you it will come out perfectly.</p>
184 |                 </div>
185 |             </div>
186 |             <div class="pt">
187 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee51_3%20(2).webp" alt="">
188 |             </div>
189 |         </div>
190 |         <div id="page10">
191 |             <h1>HOWEVER <br>YOU WEAR IT, <br> WE HAVE IT.</h1>
192 |             <div id="container">
193 |                 <div class="img-div">
194 |                     <div class="img">
195 |                         <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/659d0822376dfad3d93545bf_hair.webp" alt="">
196 |                     </div>
197 |                     <h2>lace top</h2>
198 |                 </div>
199 |                 <div class="img-div">
200 |                     <div class="img">
201 |                         <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee46_blond%20woman%20pink%20bg.webp" alt="">
202 |                     </div>
203 |                     <h2>lace fonts</h2>
204 |                 </div>
205 |                 <div class="img-div">
206 |                     <div class="img">
207 |                         <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee47_woman%20green%20pink.webp" alt="">
208 |                     </div>
209 |                     <h2>multis</h2>
210 |                 </div>
211 |             </div>
212 |         </div>
213 |         <div id="page11">
214 |             <div class="slide">
215 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4f_woman%20with%20awesome%20brown%20hair.webp" alt="">
216 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4d_woman%20phone%20big.webp" alt="">
217 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4e_woman%20orange%20big.webp" alt="">
218 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee52_4%20(2).webp" alt="">
219 |             </div>
220 |             <div class="slide">
221 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4f_woman%20with%20awesome%20brown%20hair.webp" alt="">
222 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4d_woman%20phone%20big.webp" alt="">
223 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee4e_woman%20orange%20big.webp" alt="">
224 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee52_4%20(2).webp" alt="">
225 |             </div>
226 |         </div>
227 |         <div id="page12">
228 |             <h1>BOOK YOUR</h1>
229 |             <h1>CONSULTATION</h1>
230 |             <h1>AT THE SALON</h1>
231 |             <div class="elm">
232 |                 <div>
233 |                     <h2>by esty brooklyn</h2>
234 |                     <h2>call/text</h2>
235 |                 </div>
236 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6597ccdf6701fd6784e7c03b_tele%20icon.svg" alt="">
237 | 
238 |             </div>
239 |             <div class="elm">
240 |                 <div>
241 |                     <h2>by esty lakewood</h2>
242 |                     <h2>call/text</h2>
243 |                 </div>
244 |                 <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6597ccdf6701fd6784e7c03b_tele%20icon.svg" alt="">
245 |             </div>
246 |         </div>
247 |         <div id="footer">
248 |             <img src="https://assets-global.website-files.com/6594259965ca848a371eed8f/6594259965ca848a371eee16_logo%20shorter.svg" alt="">
249 |         </div>
250 |     </div>
251 |     <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
252 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
253 |         integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
254 |         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
255 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
256 |         integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
257 |         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
258 |     <script src="script.js"></script>
259 | </body>
260 | 
261 | </html>


--------------------------------------------------------------------------------