├── Gilroy-Medium.woff ├── README.md ├── index.html ├── script.js └── style.css /Gilroy-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/CUE/f974aa51c1302dd140c34c0b239cb9efa1d62681/Gilroy-Medium.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CUE 2 | MODERN Animated WOMEN Salon websites Design 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cue | Let's get it on 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 22 |
23 | 25 |

let's

26 |

get

27 |

it

28 |

on

29 |
30 |
31 |
32 | 34 | 36 |
37 |
38 |
39 | 41 |
42 |
43 |

CUE THE MAGIC

44 |
45 | 51 |
52 |
53 |
54 | 57 |
58 |

the

59 | 61 |
62 |

APPLAUSE

63 |
64 |

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.

65 |
66 |
67 |
68 |
69 |

WE’RE NOT

70 |
71 |
72 |

CHANGING THE

73 |
74 |
75 |

WORLD, WE SELL

76 |
77 |
78 |

WIGS.

79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |

BUT TO US, THE CRAFTERS OF ONE OF THE MOST INTIMATE PARTS OF YOUR LIFE, YOU ARE OUR WORLD.

87 |
88 |
89 |
90 |
read more
91 |
more about cue
92 |
93 |
94 |
95 |
96 |
97 | 98 |
99 |
100 |
101 |
102 |
103 |
104 |

SO YES, PEOPLE MAY THINK WE GO OVERBOARD WHEN WE HANDPICK EVERY STRAND OF HAIR BEFORE WE START CREATING YOUR WIG.

105 |

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

106 |
107 |
read more
108 |
109 |
110 | 111 |
112 |
113 |
114 | 115 |
116 |
117 |
118 |
119 |
120 |

BECAUSE WE BELIEVE YOU DESERVE A WIG THAT'S AS PERFECT AS YOU ARE.

121 |
122 |
123 |
124 |
125 |
read more
126 |
more about cue
127 |
128 |
129 |
130 |
131 | 132 |
133 |
134 |
135 |
136 |
137 |

HERE’S

138 |
139 |

YOUR

140 | 141 |
142 |
143 |
144 |
145 |

IT ALL STARTS WITH HAIR, THE HIGHEST QUALITY EUROPEAN HAIR

146 |

To be precise, that we purchase on a head-by-head basis ensuring that we know exactly who and where it’s coming from.

147 |
HAIR AND NOW
148 | 149 |
150 |
151 | 152 |
GOOD MUSIC
153 |

BASED ON WHAT THE PIECE WILL BECOME

154 |

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.

155 |
156 |
157 |
158 | 159 | 160 |

FALL

161 |

HEAD

162 |

FIRST

163 |
164 |
165 |
166 |

HERE COMES THE CAP, OR THE CANVAS AS WE CALL IT

167 |

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.

168 |
HEADS UP
169 | 170 |
171 |
172 | 173 |
FROM MATCHING TO CRAFTING
174 |

NOW THAT THE CAP IS CRAFTED AND THE HAIR IS ASSEMBLED

175 |

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.

176 |
177 |
178 |
179 |
180 |
WIGS BY ESTY
181 |
182 |

WITH THE AMOUNT OF WORK THAT GOES INTO EVERY PIECE, WE HAVE DECIDED TO WORK WITH ONLY ONE SALON WE TRUST.

183 |

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.

184 |
185 |
186 |
187 | 188 |
189 |
190 |
191 |

HOWEVER
YOU WEAR IT,
WE HAVE IT.

192 |
193 |
194 |
195 | 196 |
197 |

lace top

198 |
199 |
200 |
201 | 202 |
203 |

lace fonts

204 |
205 |
206 |
207 | 208 |
209 |

multis

210 |
211 |
212 |
213 |
214 |
215 | 216 | 217 | 218 | 219 |
220 |
221 | 222 | 223 | 224 | 225 |
226 |
227 |
228 |

BOOK YOUR

229 |

CONSULTATION

230 |

AT THE SALON

231 |
232 |
233 |

by esty brooklyn

234 |

call/text

235 |
236 | 237 | 238 |
239 |
240 |
241 |

by esty lakewood

242 |

call/text

243 |
244 | 245 |
246 |
247 | 250 |
251 | 252 | 255 | 258 | 259 | 260 | 261 | -------------------------------------------------------------------------------- /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 += ` ${word}` 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 | } --------------------------------------------------------------------------------