├── .gitignore ├── README.md ├── css └── style.css ├── fonts └── canela.ttf ├── icons ├── logo.svg └── shopping-cart.svg ├── images ├── banner.jpg ├── g-1.jpg ├── g-10.jpg ├── g-11.jpg ├── g-12.jpg ├── g-2.jpg ├── g-3.jpg ├── g-4.jpg ├── g-5.jpg ├── g-6.jpg ├── g-7.jpg ├── g-8.jpg ├── g-9.jpg ├── intro.jpg ├── line-1.jpg ├── line-2.jpg ├── line-3.jpg ├── line-4.jpg ├── line-5.jpg └── line-6.jpg ├── index.html ├── javascript ├── index.js └── utils.js ├── package-lock.json ├── package.json └── scss ├── _bass.scss ├── _reset.scss ├── abstracts ├── _mixins.scss └── _utils.scss ├── components ├── _btns.scss ├── _hamb.scss └── _locoscroll.scss ├── layouts ├── _footer.scss ├── _layout.scss └── _navbar.scss ├── main.scss └── pages └── _home.scss /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | /.cache 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # awwward-rebuild-2 2 | 3 | complete home page (not-responsive) 4 | 5 | main website link : https://rose-maggie.com/ 6 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap"); 3 | @font-face { 4 | font-family: "canela"; 5 | src: url(../fonts/canela.ttf); } 6 | 7 | body { 8 | font-size: 1rem; 9 | overflow-x: hidden; 10 | font-feature-settings: "kern" 1; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-kerning: normal; 13 | font-kerning: normal; 14 | overscroll-behavior: none; 15 | font-family: "canela"; 16 | background-color: #efe9d0; } 17 | 18 | * { 19 | scroll-behavior: smooth; 20 | margin: 0; 21 | padding: 0; 22 | box-sizing: border-box; } 23 | 24 | ::after, 25 | ::before { 26 | box-sizing: border-box; 27 | transition: all 0.5s ease; } 28 | 29 | ul { 30 | list-style: none; } 31 | 32 | a, 33 | button, 34 | input { 35 | position: relative; 36 | outline: none; 37 | border: none; 38 | text-decoration: none; 39 | transition: all 0.5s ease; } 40 | 41 | article, 42 | aside, 43 | details, 44 | figcaption, 45 | figure, 46 | footer, 47 | header, 48 | hgroup, 49 | main, 50 | nav, 51 | section, 52 | summary { 53 | display: block; } 54 | 55 | audio, 56 | canvas, 57 | video { 58 | display: inline-block; } 59 | 60 | audio:not([controls]) { 61 | display: none; 62 | height: 0; } 63 | 64 | abbr[title] { 65 | border-bottom: 1px dotted; } 66 | 67 | b, 68 | strong { 69 | font-weight: bold; } 70 | 71 | dfn { 72 | font-style: italic; } 73 | 74 | hr { 75 | -moz-box-sizing: content-box; 76 | box-sizing: content-box; 77 | height: 0; } 78 | 79 | mark { 80 | background: #ff0; 81 | color: #000; } 82 | 83 | code, 84 | kbd, 85 | pre, 86 | samp { 87 | font-family: "Source Sans Pro", sans-serif; 88 | font-size: 1em; } 89 | 90 | pre { 91 | white-space: pre-wrap; } 92 | 93 | q { 94 | quotes: "“" "”" "‘" "’"; } 95 | 96 | small { 97 | font-size: 80%; } 98 | 99 | sub, 100 | sup { 101 | font-size: 75%; 102 | line-height: 0; 103 | position: relative; 104 | vertical-align: baseline; } 105 | 106 | sup { 107 | top: -0.5em; } 108 | 109 | sub { 110 | bottom: -0.25em; } 111 | 112 | img { 113 | border: 0; } 114 | 115 | svg:not(:root) { 116 | overflow: hidden; } 117 | 118 | figure { 119 | margin: 0; } 120 | 121 | fieldset { 122 | border: 1px solid #c0c0c0; 123 | margin: 0 2px; 124 | padding: 0.35em 0.625em 0.75em; } 125 | 126 | legend { 127 | border: 0; 128 | padding: 0; } 129 | 130 | button, 131 | html input[type="button"], 132 | input[type="reset"], 133 | input[type="submit"] { 134 | -webkit-appearance: button; 135 | cursor: pointer; } 136 | 137 | button[disabled], 138 | html input[disabled] { 139 | cursor: default; } 140 | 141 | input[type="checkbox"], 142 | input[type="radio"] { 143 | box-sizing: border-box; 144 | padding: 0; } 145 | 146 | input[type="search"] { 147 | -webkit-appearance: textfield; 148 | -moz-box-sizing: content-box; 149 | -webkit-box-sizing: content-box; 150 | box-sizing: content-box; } 151 | 152 | input[type="search"]::-webkit-search-cancel-button, 153 | input[type="search"]::-webkit-search-decoration { 154 | -webkit-appearance: none; } 155 | 156 | button::-moz-focus-inner, 157 | input::-moz-focus-inner { 158 | border: 0; 159 | padding: 0; } 160 | 161 | textarea { 162 | overflow: auto; 163 | vertical-align: top; } 164 | 165 | table { 166 | border-collapse: collapse; 167 | border-spacing: 0; } 168 | 169 | img { 170 | max-width: 100%; 171 | vertical-align: middle; } 172 | 173 | html { 174 | scroll-behavior: smooth; } 175 | 176 | .row { 177 | display: flex; 178 | flex-direction: row; 179 | align-items: center; 180 | justify-content: space-between; } 181 | 182 | .center-item { 183 | display: flex; 184 | flex-direction: column; 185 | align-items: center; 186 | justify-content: center; } 187 | 188 | .start-item { 189 | display: flex; 190 | flex-direction: column; 191 | align-items: flex-start; 192 | justify-content: flex-start; } 193 | 194 | .section { 195 | max-width: 100%; 196 | width: 100%; 197 | min-height: 100vh; 198 | position: relative; } 199 | 200 | .text-box { 201 | position: relative; 202 | overflow: hidden; 203 | line-height: 2; 204 | width: 100%; 205 | height: auto; } 206 | 207 | .img-box { 208 | width: 100%; 209 | height: 100%; 210 | position: relative; 211 | overflow: hidden; } 212 | 213 | .transition { 214 | transition: all 0.5s ease; } 215 | 216 | .title { 217 | font-size: 13vw; 218 | font-weight: 600; 219 | letter-spacing: 8px; } 220 | 221 | .title-2 { 222 | font-size: 7rem; } 223 | 224 | .title-3 { 225 | font-size: 6rem; } 226 | 227 | .sub-title { 228 | font-size: 2.5rem; } 229 | 230 | .full-size { 231 | width: 100%; 232 | height: 100%; } 233 | 234 | .pad-section { 235 | padding: 10rem 0; } 236 | 237 | .flex { 238 | display: flex; } 239 | 240 | .paragraph { 241 | font-family: "Poppins", sans-serif; 242 | font-size: 1rem; 243 | line-height: 2; 244 | color: #1c1c1d; 245 | font-weight: 400; } 246 | 247 | .wrapper { 248 | width: 100%; 249 | height: 100%; } 250 | .wrapper .scroll__container { 251 | width: 100%; 252 | height: 100%; } 253 | 254 | .container { 255 | max-width: 1300px; 256 | margin: 0 auto; 257 | width: 100%; 258 | height: 100%; 259 | position: relative; } 260 | 261 | .mini-container { 262 | max-width: 1200px; 263 | margin: 0 auto; 264 | width: 100%; 265 | height: 100%; 266 | position: relative; } 267 | 268 | .nav__container { 269 | max-width: 90%; 270 | margin: 0 auto; } 271 | 272 | .nav { 273 | width: 100%; 274 | height: fit-content; 275 | position: fixed; 276 | top: 0; 277 | left: 0; 278 | z-index: 300; 279 | transition: all 0.5s ease; } 280 | .nav.active { 281 | pointer-events: none; } 282 | .nav.active .nav-btn { 283 | opacity: 0; } 284 | .nav .shop-btn { 285 | width: 6rem; 286 | height: fit-content; } 287 | .nav .shop-btn img { 288 | width: 1rem; 289 | height: 1rem; 290 | position: absolute; 291 | transform: scale(0.9); 292 | transform-origin: center; } 293 | .nav .shop-btn div { 294 | position: relative; 295 | color: #1c1c1d; } 296 | .nav .shop-btn div :hover { 297 | color: #8e6e35; } 298 | .nav .shop-btn div.img-box { 299 | width: 2rem; 300 | height: 2rem; 301 | background-color: #1c1c1d; 302 | border-radius: 50%; } 303 | 304 | footer { 305 | background-color: #000000; } 306 | footer .mini-container { 307 | background-color: #efe9d0; 308 | height: 600px; 309 | padding: 3rem 7rem; } 310 | footer .mini-container .left-foot { 311 | flex: 0 0 60%; 312 | max-width: 60%; } 313 | footer .mini-container .left-foot p { 314 | font-size: 1rem; 315 | font-weight: 500; } 316 | footer .mini-container .left-foot h1 { 317 | color: #8e6e35; 318 | font-weight: 500; 319 | margin-top: 2rem; } 320 | footer .mini-container .left-foot .footer-links { 321 | width: 100%; 322 | align-items: flex-start; 323 | margin-top: 4rem; } 324 | footer .mini-container .left-foot .footer-links .left-links, 325 | footer .mini-container .left-foot .footer-links .right-links { 326 | flex: 0 0 50%; 327 | max-width: 50%; 328 | display: flex; 329 | flex-direction: column; 330 | align-items: flex-start; 331 | justify-content: flex-start; } 332 | footer .mini-container .left-foot .footer-links .left-links p, 333 | footer .mini-container .left-foot .footer-links .right-links p { 334 | padding: 1rem 0.5rem; 335 | color: #8e6e35; 336 | font-weight: 600; } 337 | footer .mini-container .left-foot .footer-links .left-links a, 338 | footer .mini-container .left-foot .footer-links .right-links a { 339 | color: #1c1c1d; } 340 | footer .mini-container .left-foot .footer-links .left-links a:hover, 341 | footer .mini-container .left-foot .footer-links .right-links a:hover { 342 | color: #8e6e35; } 343 | footer .mini-container .right-foot { 344 | flex: 0 0 40%; 345 | max-width: 40%; } 346 | footer .mini-container .right-foot p { 347 | margin-top: 4rem; 348 | font-size: 1.2rem; 349 | color: #543c10; 350 | letter-spacing: 2px; 351 | font-family: "canela"; 352 | font-weight: 600; } 353 | footer .mini-container .right-foot p span a { 354 | color: #8e6e35; } 355 | 356 | button, 357 | a { 358 | font-family: "Poppins", sans-serif; } 359 | 360 | .hover-btn { 361 | font-size: 1rem; 362 | font-weight: 500; 363 | padding: 0.3rem 0.5rem; 364 | overflow: hidden; 365 | cursor: pointer; } 366 | .hover-btn:hover { 367 | color: #8e6e35; } 368 | .hover-btn::after { 369 | content: ""; 370 | position: absolute; 371 | bottom: 0; 372 | left: 0; 373 | width: 100%; 374 | height: 1px; 375 | background-color: #8e6e35; 376 | transform-origin: right; 377 | transform: scaleX(0); 378 | transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); 379 | -webkit-transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); 380 | -moz-transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); } 381 | .hover-btn:hover::after { 382 | transform-origin: left; 383 | transform: scaleX(1); } 384 | 385 | .logo-btn { 386 | width: fit-content; 387 | height: fit-content; } 388 | .logo-btn img { 389 | width: 10rem; 390 | height: fit-content; } 391 | 392 | .hamb__menu { 393 | position: fixed; 394 | top: 0; 395 | right: 0; 396 | width: 40%; 397 | height: 100%; 398 | z-index: 300; 399 | background-color: #ffffff; 400 | align-items: flex-start; 401 | justify-content: flex-start; 402 | padding: 8vh 10vw; 403 | overflow: hidden; 404 | will-change: transform; 405 | transform: translateY(-100%); } 406 | .hamb__menu a.close-btn { 407 | position: absolute; 408 | top: 4rem; 409 | right: 4rem; 410 | color: #8e6e35; 411 | font-weight: 500; } 412 | .hamb__menu.active { 413 | transform: translateY(0%); } 414 | .hamb__menu .hamb-links p { 415 | color: #8e6e35; 416 | font-weight: 500; } 417 | .hamb__menu .hamb-links a { 418 | margin-left: 3rem; 419 | font-size: clamp(20px, 10vw, 60px); 420 | font-weight: 500; 421 | color: #1c1c1d; 422 | font-family: "canela"; 423 | padding: 0.6rem 1rem; 424 | transform: translateX(-50vw); 425 | opacity: 0; } 426 | .hamb__menu .hamb-links a:hover { 427 | font-style: italic; 428 | color: #8e6e35; } 429 | .hamb__menu .hamb-links-two { 430 | margin-top: 2rem; } 431 | .hamb__menu .hamb-links-two p { 432 | color: #8e6e35; 433 | font-weight: 500; } 434 | .hamb__menu .hamb-links-two a { 435 | margin-left: 3rem; 436 | font-size: 1rem; 437 | font-weight: 500; 438 | color: #1c1c1d; 439 | padding: 0.4rem 0; 440 | opacity: 0; 441 | transform: translateY(5rem); } 442 | .hamb__menu .hamb-links-two a:nth-of-type(1) { 443 | margin-top: 1rem; } 444 | .hamb__menu .hamb-links-two a:hover { 445 | color: #8e6e35; } 446 | .hamb__menu p.dev-p { 447 | position: absolute; 448 | bottom: 2rem; 449 | right: 2rem; } 450 | .hamb__menu p.dev-p span a { 451 | color: #8e6e35; } 452 | 453 | /*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 454 | html.has-scroll-smooth { 455 | overflow: hidden; 456 | position: fixed; 457 | top: 0; 458 | left: 0; 459 | right: 0; 460 | bottom: 0; } 461 | 462 | html.has-scroll-dragging { 463 | -webkit-user-select: none; 464 | -moz-user-select: none; 465 | -ms-user-select: none; 466 | user-select: none; } 467 | 468 | .has-scroll-smooth body { 469 | overflow: hidden; } 470 | 471 | .has-scroll-smooth [data-scroll-container] { 472 | min-height: 100vh; } 473 | 474 | [data-scroll-direction="horizontal"] [data-scroll-container] { 475 | display: inline-block; 476 | height: 100vh; 477 | white-space: nowrap; } 478 | 479 | [data-scroll-direction="horizontal"] [data-scroll-section] { 480 | display: inline-block; 481 | height: 100%; 482 | vertical-align: top; 483 | white-space: nowrap; } 484 | 485 | .c-scrollbar { 486 | height: 100%; 487 | opacity: 0; 488 | position: absolute; 489 | right: 0; 490 | top: 0; 491 | transform-origin: center right; 492 | transition: transform 0.3s, opacity 0.3s; 493 | width: 11px; } 494 | 495 | .c-scrollbar:hover { 496 | transform: scaleX(1.45); } 497 | 498 | .c-scrollbar:hover, 499 | .has-scroll-dragging .c-scrollbar, 500 | .has-scroll-scrolling .c-scrollbar { 501 | opacity: 1; } 502 | 503 | [data-scroll-direction="horizontal"] .c-scrollbar { 504 | bottom: 0; 505 | height: 10px; 506 | top: auto; 507 | transform: scaleY(1); 508 | width: 100%; } 509 | 510 | [data-scroll-direction="horizontal"] .c-scrollbar:hover { 511 | transform: scaleY(1.3); } 512 | 513 | .c-scrollbar_thumb { 514 | background-color: #000; 515 | border-radius: 10px; 516 | cursor: -webkit-grab; 517 | cursor: grab; 518 | margin: 2px; 519 | opacity: 0.5; 520 | position: absolute; 521 | right: 0; 522 | top: 0; 523 | width: 7px; 524 | display: none; } 525 | 526 | .has-scroll-dragging .c-scrollbar_thumb { 527 | cursor: -webkit-grabbing; 528 | cursor: grabbing; } 529 | 530 | [data-scroll-direction="horizontal"] .c-scrollbar_thumb { 531 | bottom: 0; 532 | right: auto; } 533 | 534 | ::-webkit-scrollbar { 535 | display: none; } 536 | 537 | .banner { 538 | overflow: hidden; } 539 | .banner .bg-container { 540 | position: absolute; 541 | top: 0; 542 | left: 0; 543 | overflow: hidden; 544 | transform: scale(1.3); 545 | z-index: 1; } 546 | .banner .bg-container .parallax-container { 547 | background-size: cover !important; 548 | background-position: center !important; 549 | transform-origin: top; } 550 | .banner h1 { 551 | position: relative; 552 | z-index: 2; 553 | color: #ffffff; } 554 | 555 | .about .container .text-box { 556 | text-align: center; 557 | position: relative; } 558 | .about .container .text-box:nth-of-type(2) { 559 | margin-top: 2rem; } 560 | .about .container .text-box h6 { 561 | font-size: 1rem; 562 | font-family: "Poppins", sans-serif; 563 | font-weight: 600; 564 | color: #8e6e35; 565 | letter-spacing: 4px; 566 | line-height: 2rem; } 567 | .about .container .text-box h6 span { 568 | padding: 1rem; 569 | border: 2px solid #8e6e35; 570 | line-height: 1.2rem; 571 | border-radius: 50%; 572 | font-family: "canela"; } 573 | .about .container .text-box h1 { 574 | font-weight: 500; 575 | line-height: 1.5; 576 | text-align: center; 577 | align-items: center; 578 | justify-content: center; 579 | word-spacing: 4px; } 580 | .about .container .text-box h1 div { 581 | width: 13rem; 582 | height: 8rem; 583 | overflow: hidden; 584 | margin: 0 0.5rem; } 585 | @media only screen and (max-width: 1060px) { 586 | .about .container .text-box h1 div { 587 | width: 10rem; 588 | height: 6rem; } } 589 | .about .container .text-box h1 div img { 590 | transition: all 0.5s ease; 591 | transform-origin: center; } 592 | .about .container .text-box h1 div:hover img { 593 | transform: scale(1.2); } 594 | 595 | .intro { 596 | max-height: 100vh; } 597 | .intro .mini-container { 598 | height: 800px; 599 | align-items: flex-end; 600 | justify-content: flex-end; } 601 | @media only screen and (max-width: 1060px) { 602 | .intro .mini-container { 603 | padding: 0 2rem; } } 604 | .intro .mini-container .intro-content { 605 | flex: 0 0 45%; 606 | max-width: 45%; 607 | position: relative; 608 | justify-content: flex-end; 609 | padding: 5rem 0; } 610 | .intro .mini-container .intro-content .text-box:not(.parallax-box) { 611 | padding: 1.2rem 0; 612 | border-top: 1px solid #ceb286; } 613 | .intro .mini-container .intro-content .text-box:not(.parallax-box):nth-of-type(1) { 614 | margin-top: 2rem; } 615 | .intro .mini-container .intro-content .text-box:not(.parallax-box):nth-of-type(3) { 616 | border-bottom: 1px solid #ceb286; } 617 | .intro .mini-container .intro-content .text-box:not(.parallax-box) .text-box p { 618 | font-size: 1.2rem; } 619 | .intro .mini-container .intro-content .parallax-box { 620 | position: absolute; 621 | top: 10vh; 622 | left: -20rem; 623 | width: 40rem; 624 | height: fit-content; 625 | z-index: 4; 626 | pointer-events: none; } 627 | .intro .mini-container .intro-content .parallax-box h1 { 628 | line-height: 1.2; 629 | color: #8e6e35; 630 | font-weight: 500; } 631 | .intro .mini-container .intro-pic { 632 | position: absolute; 633 | top: 0; 634 | left: 0; 635 | flex: 0 0 50%; 636 | max-width: 50%; 637 | height: 100%; } 638 | .intro .mini-container .intro-pic .img-box { 639 | position: absolute; 640 | z-index: 2; 641 | height: 80%; 642 | width: 30rem; 643 | top: 2rem; } 644 | .intro .mini-container .intro-pic .img-box img { 645 | transform-origin: top; 646 | transform: scale(1.4, 1); 647 | width: 100%; 648 | height: 100%; } 649 | .intro .mini-container .intro-pic .bg-container { 650 | width: 100%; 651 | height: 60%; 652 | position: absolute; 653 | bottom: 0; 654 | background-color: #ecdabc; } 655 | 656 | .news { 657 | max-height: 100vh; 658 | overflow: hidden; } 659 | .news .bg-container { 660 | position: absolute; 661 | top: 0; 662 | left: 0; 663 | transform: scale(1.2, 1.4); 664 | z-index: 1; } 665 | .news .bg-container .parallax-container { 666 | background-position: top !important; 667 | background-size: cover !important; 668 | transform-origin: top; } 669 | .news .text-box { 670 | z-index: 3; 671 | width: 215rem; } 672 | .news .text-box h1 { 673 | font-weight: 600; 674 | font-style: italic; 675 | color: #ffffff; 676 | animation: roll 15s linear infinite; 677 | width: 215rem; 678 | text-shadow: 215rem 0 #ffffff, calc(215rem * 2) 0 #ffffff, calc(215rem * 3) 0 #ffffff; } 679 | .news .mini-container { 680 | position: absolute; 681 | height: 100vh; } 682 | .news .mini-container .img-box { 683 | position: absolute; 684 | right: 0; 685 | width: 24rem; 686 | height: 35rem; 687 | z-index: 5; 688 | right: 0; 689 | top: 50%; 690 | transform: translateY(-50%); } 691 | @media only screen and (max-width: 1060px) { 692 | .news .mini-container .img-box { 693 | right: 2rem; } } 694 | .news .mini-container .img-box:hover img { 695 | filter: grayscale(0.4); } 696 | .news .mini-container .img-box img { 697 | width: 100%; 698 | height: 100%; 699 | transform: scale(1.8, 1); 700 | align-tracks: center; 701 | transition: all 0.5s ease; } 702 | 703 | @keyframes roll { 704 | 0% { 705 | transform: translateX(0); } 706 | 100% { 707 | transform: translateX(-100%); } } 708 | 709 | .challange .container h1 { 710 | font-weight: 500; 711 | font-style: italic; 712 | text-align: center; 713 | line-height: 1.2; } 714 | 715 | .contact { 716 | max-height: 100vh; } 717 | .contact .left-contact { 718 | flex: 0 0 50%; 719 | max-width: 50%; 720 | height: 100vh; 721 | background-color: #000000; 722 | text-align: center; } 723 | .contact .left-contact p { 724 | font-size: 1.2rem; 725 | font-weight: 600; 726 | color: #ffffff; 727 | letter-spacing: 2px; } 728 | .contact .left-contact h4 { 729 | font-style: italic; 730 | color: #8e6e35; 731 | font-weight: 500; 732 | line-height: 1.3; 733 | width: 30rem; 734 | margin: 2rem 0 3rem 0; } 735 | .contact .left-contact form { 736 | width: 60%; } 737 | .contact .left-contact form input[type="email"] { 738 | border: 1px solid #8e6e35; 739 | padding: 1.5rem 1rem; 740 | background-color: transparent; 741 | font-size: 1.2rem; 742 | font-weight: 500; 743 | color: #ffffff; 744 | width: 100%; 745 | height: fit-content; } 746 | .contact .left-contact form input[type="submit"] { 747 | border: 1px solid #8e6e35; 748 | color: #543c10; 749 | padding: 1.5rem 1rem; 750 | width: 100%; 751 | height: 100%; 752 | background-color: transparent; 753 | font-size: 1.2rem; 754 | text-transform: uppercase; 755 | font-weight: 300; } 756 | .contact .left-contact form input[type="submit"]:hover { 757 | color: #ffffff; 758 | background-color: #543c10; 759 | border: 1px solid #543c10; } 760 | .contact .right-contact { 761 | flex: 0 0 50%; 762 | max-width: 50%; 763 | height: 100vh; 764 | position: relative; 765 | background-color: #ceb286; } 766 | .contact .right-contact h1 { 767 | font-weight: 500; 768 | line-height: 1.2; } 769 | .contact .right-contact .img-box { 770 | position: absolute; 771 | top: 50%; 772 | left: 50%; 773 | transform: translate(-50%, -50%); 774 | width: 24rem; 775 | height: 32rem; 776 | opacity: 0.9; } 777 | .contact .right-contact .img-box img { 778 | transform: center; 779 | transform: scale(1.4, 1.7); } 780 | 781 | .oth { 782 | background-color: #ffffff; } 783 | .oth .mini-container p.p-one { 784 | font-size: 1.2rem; 785 | font-weight: 600; } 786 | .oth .mini-container h1 { 787 | font-weight: 600; 788 | color: #8e6e35; 789 | letter-spacing: 5px; 790 | margin-top: 2rem; } 791 | .oth .mini-container .oth-content { 792 | margin-top: 3rem; 793 | align-items: flex-start; 794 | position: relative; 795 | margin-bottom: 5rem; } 796 | @media only screen and (max-width: 1060px) { 797 | .oth .mini-container .oth-content { 798 | padding: 0 2rem; } } 799 | .oth .mini-container .oth-content :after { 800 | content: ""; 801 | height: 100%; 802 | width: 1px; 803 | background-color: #ceb286; 804 | top: 0; 805 | left: 50%; 806 | transform: translateX(-50%); 807 | position: absolute; 808 | z-index: 2; } 809 | .oth .mini-container .oth-content .left-oth { 810 | flex: 0 0 50%; 811 | max-width: 50%; } 812 | .oth .mini-container .oth-content .left-oth p { 813 | width: 90%; } 814 | .oth .mini-container .oth-content .left-oth p.thin-p { 815 | font-weight: 600; 816 | margin-bottom: 2rem; } 817 | .oth .mini-container .oth-content .right-oth { 818 | flex: 0 0 50%; 819 | max-width: 50%; } 820 | .oth .mini-container .oth-content .right-oth p { 821 | width: 90%; } 822 | .oth .mini-container .oth-content .right-oth p:nth-last-of-type(2) { 823 | margin-bottom: 2rem; } 824 | .oth .mini-container a.btn { 825 | font-size: 1rem; 826 | font-weight: 600; 827 | color: #1c1c1d; 828 | background-color: #ecdabc; 829 | width: 14rem; 830 | height: 4rem; 831 | position: relative; 832 | overflow: hidden; } 833 | .oth .mini-container a.btn::after { 834 | content: attr(data-name); 835 | font-size: 1rem; 836 | font-weight: 500; 837 | width: 100%; 838 | height: 100%; 839 | position: absolute; 840 | background-color: #000000; 841 | color: #ffffff; 842 | display: flex; 843 | align-items: center; 844 | justify-content: center; 845 | top: 0; 846 | left: 0; 847 | transform: translateY(100%); } 848 | .oth .mini-container a.btn span { 849 | position: absolute; 850 | transition: all 0.5s ease; } 851 | .oth .mini-container a.btn:hover span { 852 | transform: translateY(5rem); } 853 | .oth .mini-container a.btn:hover::after { 854 | transform: translateY(0); } 855 | 856 | @media only screen and (max-width: 1060px) { 857 | .title-2 { 858 | font-size: 6vw; } 859 | .title-3 { 860 | font-size: 6vw; } 861 | .sub-title { 862 | font-size: 3vw; } } 863 | -------------------------------------------------------------------------------- /fonts/canela.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/fonts/canela.ttf -------------------------------------------------------------------------------- /icons/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml 74 | -------------------------------------------------------------------------------- /icons/shopping-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/banner.jpg -------------------------------------------------------------------------------- /images/g-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-1.jpg -------------------------------------------------------------------------------- /images/g-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-10.jpg -------------------------------------------------------------------------------- /images/g-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-11.jpg -------------------------------------------------------------------------------- /images/g-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-12.jpg -------------------------------------------------------------------------------- /images/g-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-2.jpg -------------------------------------------------------------------------------- /images/g-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-3.jpg -------------------------------------------------------------------------------- /images/g-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-4.jpg -------------------------------------------------------------------------------- /images/g-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-5.jpg -------------------------------------------------------------------------------- /images/g-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-6.jpg -------------------------------------------------------------------------------- /images/g-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-7.jpg -------------------------------------------------------------------------------- /images/g-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-8.jpg -------------------------------------------------------------------------------- /images/g-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/g-9.jpg -------------------------------------------------------------------------------- /images/intro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/intro.jpg -------------------------------------------------------------------------------- /images/line-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/line-1.jpg -------------------------------------------------------------------------------- /images/line-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/line-2.jpg -------------------------------------------------------------------------------- /images/line-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/line-3.jpg -------------------------------------------------------------------------------- /images/line-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/line-4.jpg -------------------------------------------------------------------------------- /images/line-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/line-5.jpg -------------------------------------------------------------------------------- /images/line-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MAGGIx1404/awwward-rebuild-2/e461caabc6b607a1c04f7aa4d1766798a07b901b/images/line-6.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home - Mary Kay 8 | 9 | 10 | 11 | 12 | 13 | 31 | 32 | 33 | 34 |
35 | CLOSE 36 |
37 |

MENU

38 | Home 39 | About 40 | Product 41 | Gallery 42 | Contact 43 |
44 |
45 |

SUPPORT

46 | TERMS & CONDITIONS 47 | PRIVACY POLICIES 48 | LEGAL MENTIONS 49 |
50 |

51 | Devlop by : 52 | MAGGI 60 |

61 |
62 | 63 | 64 | 65 |
66 | 67 |
68 | 69 | 87 | 88 | 89 |
94 |
95 |
96 |
97 | WE'LL SHOW YOU 08 METHODS TO IMPROVE : 98 |
99 |
100 |
101 |

Smooth Hair

102 |
103 |
104 |

105 | Heals 106 |
107 | error 108 |
109 | Derms 110 |

111 |
112 |
113 |

114 |
115 | error 116 |
117 | Natural Peeling 118 |

119 |
120 |
121 |

122 | Nails Ressurection 123 |
124 | error 125 |
126 |

127 |
128 |
129 |

130 | Reducing 131 |
132 | error 133 |
134 | FaceLines 135 |

136 |
137 |
138 |

139 | Faster Growth 140 |
141 | error 142 |
143 |

144 |
145 |
146 |

Healther Skin

147 |
148 |
149 |
150 | 151 | 152 |
157 |
158 |
159 |

160 | Aligning products of extreme quality with the goal of bringing a 161 | result never dreamed of. Mary Kay trusts in the power of beauty, 162 | which is why we exist. We aim to bring facial, hair and body 163 | products with the divine quality of the Gods. Always aiming for 164 | exclusivity in packaging, service, and of course, in Divine 165 | quality. 166 |

167 |
168 |

THAT'S WHY:

169 |

We create special products.

170 |
171 |
172 |

WE ALWAYS:

173 |

Take care about every details.

174 |
175 |
176 |

FOR WHO:

177 |

Who always desire be beautiful.

178 |
179 |
185 |

186 | Our oath,
187 | You beautiful 188 |

189 |
190 |
191 |
192 |
193 | error 194 |
195 |
196 |
197 |
198 |
199 | 200 | 201 |
206 | 207 |
208 |
215 |
216 | 217 | 218 |
219 |
220 | error 221 |
222 |
223 | 224 |
225 |

We are Mary Kay, Exclusively Premium.

226 |
227 |
228 | 229 | 230 |
235 |
236 |

237 | “Mary Kay, we are
238 | welcoming challenges to foster
our beauty. People inspire us 239 |
240 | and we want to inspire
241 | them too.” 242 |

243 |
244 |
245 | 246 | 247 |
248 |
249 |

BE CONNECTED

250 |

251 | Join our newsletter and be informed of our news and exceptional 252 | sales. 253 |

254 |
255 | 262 | 263 |
264 |
265 |
266 |

2020

267 |

SHARE US

268 |

FOLLOW US

269 |

CONNECT

270 |

TODAY

271 |
272 | error 273 |
274 |
275 |
276 | 277 | 278 |
283 |
284 |

OUR OATH AND PHILOSOPHY

285 |

Mary Kay

286 |
287 |
288 |

289 | INNOVATION, CREATIVITY, AND SOCIAL COMMITMENT ARE OUR GREATEST 290 | VALUES. PROFESSIONALISM AND THE SCIENCE THAT EVERY DAY IS A 291 | NEW DAY TO SURPRISE EVERYONE AND EVERYTHING. WE VALUE THE 292 | ETHICS OF MEETING ALL THE EXPECTATIONS OF EACH CUSTOMER WHO 293 | TRUSTS IN OUR SERIOUS AND HARD WORK. 294 |

295 |

296 | Provide unique experiences for everyone involved with a brand. 297 | A trip without time, igniting a flame of enthusiasm and 298 | curiosity for each one. Be striking, unique, and 299 | extraordinary. Providing benefits for beauty, and at the same 300 | time, fun with our unique way of being. Our greatest mission 301 | is required according to our ideals 302 |

303 |
304 |
305 |

306 | We are not just a brand of nutritional cosmetics, cosmetics, 307 | and cosmetics, we are a company of excellence in the 308 | international market for processing and marketing high-quality 309 | products and continuing to expand in the market in which we 310 | operate. 311 |

312 |

313 | With a commitment to the continuous improvement of its 314 | products and sustainable development and profitability in its 315 | business. Encouraging our customers engaged in our lifestyle, 316 | participating in causes, sending life rewards those who sow or 317 | well. Taking care of our planet, with products that are less 318 | and less harmful to the environment, because our castle is our 319 | land. 320 |

321 |
322 |
323 | 324 | ABOUT US 325 | 326 |
327 |
328 | 329 | 330 |
335 |
336 |
337 |

WELCOME TO OUR WORLD

338 |

MARY KAY

339 |
340 |
341 |

MENU

342 | Home 343 | About 344 | Products 345 | Gallery 346 | Contact 347 |
348 |
349 |

SUPPORT

350 | Terms & Conditions 351 | Privacy Policy 352 | Legal Mention 353 |
354 |
355 |
356 |
357 |

358 | Provide unique experiences for everyone involved with a brand. A 359 | trip without time, igniting a flame of enthusiasm and curiosity 360 | for each one. 361 |

362 |

363 | Develop by : 364 | MAGGI 372 |

373 |
374 |
375 |
376 | 377 |
378 | 379 |
380 | 381 | 382 | 383 | 384 | 385 | -------------------------------------------------------------------------------- /javascript/index.js: -------------------------------------------------------------------------------- 1 | import { gsap, TweenMax, Expo, TweenLite } from "gsap"; 2 | import preloadImages from "./utils"; 3 | import LocomotiveScroll from "locomotive-scroll"; 4 | import ScrollTrigger from "gsap/ScrollTrigger"; 5 | 6 | gsap.registerPlugin(ScrollTrigger); 7 | 8 | // scroll init 9 | const scroll__container = document.getElementById("scroll__container"); 10 | 11 | const scroller = new LocomotiveScroll({ 12 | el: scroll__container, //scroll element (scroll container) 13 | smooth: true, // smooth scroll enabled 14 | getDirection: true, // display scoll direction (up & down) 15 | lerp: 0.01, //scroll smoothness 16 | smartphone: { 17 | lerp: 0.5, 18 | smooth: true, //smooth scroll enabled for mobile 19 | }, 20 | tablet: { 21 | lerp: 0.5, 22 | smooth: true, //smooth scroll enabled for tablet & ipad 23 | }, 24 | offset: [0, 0], 25 | useKeyboard: true, 26 | getSpeed: true, 27 | class: "is-inview", 28 | scrollbarClass: "c-scrollbar", 29 | scrollingClass: "has-scroll-scrolling", 30 | draggingClass: "has-scroll-dragging", 31 | smoothClass: "has-scroll-smooth", 32 | initClass: "has-scroll-init", 33 | multiplier: 1, 34 | firefoxMultiplier: 50, 35 | touchMultiplier: 2, 36 | scrollFromAnywhere: false, 37 | }); 38 | 39 | window.addEventListener("load", function () { 40 | scroller.init(); 41 | scroller.update(); 42 | }); 43 | 44 | scroller.on("scroll", ScrollTrigger.update); 45 | 46 | // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things 47 | ScrollTrigger.scrollerProxy(scroll__container, { 48 | scrollTop(value) { 49 | return arguments.length 50 | ? scroller.scrollTo(value, 0, 0) 51 | : scroller.scroll.instance.scroll.y; 52 | }, // we don't have to define a scrollLeft because we're only scrolling vertically. 53 | getBoundingClientRect() { 54 | return { 55 | top: 0, 56 | left: 0, 57 | width: window.innerWidth, 58 | height: window.innerHeight, 59 | }; 60 | }, 61 | // 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). 62 | pinType: document.querySelector(".scroll__container").style.transform 63 | ? "transform" 64 | : "fixed", 65 | }); 66 | 67 | // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 68 | ScrollTrigger.addEventListener("refresh", () => scroller.update()); 69 | 70 | // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. 71 | ScrollTrigger.refresh(); 72 | 73 | // hamb-animation 74 | 75 | function hambAnimation() { 76 | let hamb__btn = document.getElementById("hamb__btn"); 77 | let close__btn = document.getElementById("close-btn"); 78 | 79 | hamb__btn.addEventListener("click", function () { 80 | startIn(); 81 | }); 82 | close__btn.addEventListener("click", function () { 83 | endIn(); 84 | }); 85 | 86 | function startIn() { 87 | TweenMax.to(".hamb__menu", 1, { 88 | y: "0%", 89 | ease: Expo.easeIn, 90 | }); 91 | 92 | TweenMax.staggerTo( 93 | ".hamb-btn", 94 | 0.5, 95 | { 96 | delay: 0.2, 97 | x: "0%", 98 | opacity: 1, 99 | ease: Expo.easeIn, 100 | }, 101 | 0.1 102 | ); 103 | TweenMax.staggerTo( 104 | ".hamb-btn-two", 105 | 0.5, 106 | { 107 | delay: 0.4, 108 | y: "0%", 109 | opacity: 1, 110 | ease: Expo.easeIn, 111 | }, 112 | 0.1 113 | ); 114 | } 115 | 116 | function endIn() { 117 | TweenMax.to(".hamb__menu", 1, { 118 | y: "-100%", 119 | delay: 0.6, 120 | ease: Expo.easeOut, 121 | }); 122 | 123 | TweenMax.staggerTo( 124 | ".hamb-btn", 125 | 0.5, 126 | { 127 | x: "-50vw", 128 | opacity: 0, 129 | ease: Expo.easeOut, 130 | }, 131 | 0.1 132 | ); 133 | TweenMax.staggerTo( 134 | ".hamb-btn-two", 135 | 0.5, 136 | { 137 | y: "4rem", 138 | opacity: 0, 139 | ease: Expo.easeOut, 140 | }, 141 | 0.1 142 | ); 143 | } 144 | } 145 | 146 | hambAnimation(); 147 | 148 | // on top 149 | 150 | const banner = document.getElementById("banner"); 151 | 152 | document.querySelector("#logo__btn").addEventListener("click", function () { 153 | scroller.scrollTo(banner); 154 | }); 155 | -------------------------------------------------------------------------------- /javascript/utils.js: -------------------------------------------------------------------------------- 1 | // Map number x from range [a, b] to [c, d] 2 | const map = (x, a, b, c, d) => ((x - a) * (d - c)) / (b - a) + c; 3 | 4 | // Linear interpolation 5 | const lerp = (a, b, n) => (1 - n) * a + n * b; 6 | 7 | const clamp = (num, min, max) => (num <= min ? min : num >= max ? max : num); 8 | 9 | // Gets the mouse position 10 | const getMousePos = (e) => { 11 | let posx = 0; 12 | let posy = 0; 13 | if (!e) e = window.event; 14 | if (e.pageX || e.pageY) { 15 | posx = e.pageX; 16 | posy = e.pageY; 17 | } else if (e.clientX || e.clientY) { 18 | posx = e.clientX + body.scrollLeft + document.documentElement.scrollLeft; 19 | posy = e.clientY + body.scrollTop + document.documentElement.scrollTop; 20 | } 21 | 22 | return { x: posx, y: posy }; 23 | }; 24 | 25 | // Generate a random float. 26 | const getRandomFloat = (min, max) => 27 | (Math.random() * (max - min) + min).toFixed(2); 28 | const imagesLoaded = require("imagesloaded"); 29 | 30 | // Preload images 31 | const preloadImages = (selector = "img") => { 32 | return new Promise((resolve) => { 33 | imagesLoaded( 34 | document.querySelectorAll(selector), 35 | { background: true }, 36 | resolve 37 | ); 38 | }); 39 | }; 40 | 41 | export { map, lerp, clamp, getMousePos, getRandomFloat, preloadImages }; 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "site-3", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "watch:sass": "node-sass scss/main.scss css/style.css --watch", 9 | "compile:sass": "node-sass scss/main.scss css/style.css", 10 | "build": "parcel index.html" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/MAGGIx1404/awwward-rebuild-2.git" 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/MAGGIx1404/awwward-rebuild-2/issues" 20 | }, 21 | "homepage": "https://github.com/MAGGIx1404/awwward-rebuild-2#readme", 22 | "devDependencies": { 23 | "node-sass": "^6.0.1", 24 | "parcel": "^2.0.1", 25 | "parcel-bundler": "^1.12.5" 26 | }, 27 | "dependencies": { 28 | "curtainsjs": "^8.1.3", 29 | "draggabilly": "^2.3.0", 30 | "gsap": "^3.8.0", 31 | "imagesloaded": "^4.1.4", 32 | "locomotive-scroll": "^4.1.3", 33 | "three": "^0.135.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /scss/_bass.scss: -------------------------------------------------------------------------------- 1 | // import font families 2 | 3 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap"); 4 | 5 | @font-face { 6 | font-family: "canela"; 7 | src: url(../fonts/canela.ttf); 8 | } 9 | 10 | // root 11 | 12 | // font-size 13 | $h1-font: 13vw; 14 | $res-h1-font: clamp(60px, 21vw, 120px); 15 | $h2-font: 7rem; 16 | $h3-font: clamp(20px, 10vw, 60px); 17 | $h4-font: 2rem; 18 | $h5-font: 6rem; 19 | $h6-font: 2.5rem; 20 | $a-font: 1.2rem; 21 | $small-font: 1rem; 22 | // font-families 23 | $pop-font: "Poppins", sans-serif; 24 | $can-font: "canela"; 25 | 26 | // colors 27 | $color: #8e6e35; 28 | $dark: #1c1c1d; 29 | $soft: #efe9d0; 30 | $decor: #ecdabc; 31 | $line: #ceb286; 32 | $strong: #543c10; 33 | $white: #ffffff; 34 | $black: #000000; 35 | 36 | // body 37 | 38 | body { 39 | font-size: 1rem; 40 | overflow-x: hidden; 41 | font-feature-settings: "kern" 1; 42 | text-rendering: optimizeLegibility; 43 | -webkit-font-kerning: normal; 44 | font-kerning: normal; 45 | overscroll-behavior: none; 46 | font-family: "canela"; 47 | background-color: $soft; 48 | } 49 | -------------------------------------------------------------------------------- /scss/_reset.scss: -------------------------------------------------------------------------------- 1 | * { 2 | scroll-behavior: smooth; 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | ::after, 9 | ::before { 10 | box-sizing: border-box; 11 | transition: all 0.5s ease; 12 | } 13 | 14 | ul { 15 | list-style: none; 16 | } 17 | 18 | a, 19 | button, 20 | input { 21 | position: relative; 22 | outline: none; 23 | border: none; 24 | text-decoration: none; 25 | transition: all 0.5s ease; 26 | } 27 | 28 | article, 29 | aside, 30 | details, 31 | figcaption, 32 | figure, 33 | footer, 34 | header, 35 | hgroup, 36 | main, 37 | nav, 38 | section, 39 | summary { 40 | display: block; 41 | } 42 | audio, 43 | canvas, 44 | video { 45 | display: inline-block; 46 | } 47 | audio:not([controls]) { 48 | display: none; 49 | height: 0; 50 | } 51 | 52 | abbr[title] { 53 | border-bottom: 1px dotted; 54 | } 55 | b, 56 | strong { 57 | font-weight: bold; 58 | } 59 | dfn { 60 | font-style: italic; 61 | } 62 | hr { 63 | -moz-box-sizing: content-box; 64 | box-sizing: content-box; 65 | height: 0; 66 | } 67 | mark { 68 | background: #ff0; 69 | color: #000; 70 | } 71 | code, 72 | kbd, 73 | pre, 74 | samp { 75 | font-family: "Source Sans Pro", sans-serif; 76 | font-size: 1em; 77 | } 78 | pre { 79 | white-space: pre-wrap; 80 | } 81 | q { 82 | quotes: "\201C""\201D""\2018""\2019"; 83 | } 84 | small { 85 | font-size: 80%; 86 | } 87 | sub, 88 | sup { 89 | font-size: 75%; 90 | line-height: 0; 91 | position: relative; 92 | vertical-align: baseline; 93 | } 94 | sup { 95 | top: -0.5em; 96 | } 97 | sub { 98 | bottom: -0.25em; 99 | } 100 | img { 101 | border: 0; 102 | } 103 | svg:not(:root) { 104 | overflow: hidden; 105 | } 106 | figure { 107 | margin: 0; 108 | } 109 | fieldset { 110 | border: 1px solid #c0c0c0; 111 | margin: 0 2px; 112 | padding: 0.35em 0.625em 0.75em; 113 | } 114 | legend { 115 | border: 0; 116 | padding: 0; 117 | } 118 | 119 | button, 120 | html input[type="button"], 121 | input[type="reset"], 122 | input[type="submit"] { 123 | -webkit-appearance: button; 124 | cursor: pointer; 125 | } 126 | button[disabled], 127 | html input[disabled] { 128 | cursor: default; 129 | } 130 | input[type="checkbox"], 131 | input[type="radio"] { 132 | box-sizing: border-box; 133 | padding: 0; 134 | } 135 | input[type="search"] { 136 | -webkit-appearance: textfield; 137 | -moz-box-sizing: content-box; 138 | -webkit-box-sizing: content-box; 139 | box-sizing: content-box; 140 | } 141 | input[type="search"]::-webkit-search-cancel-button, 142 | input[type="search"]::-webkit-search-decoration { 143 | -webkit-appearance: none; 144 | } 145 | button::-moz-focus-inner, 146 | input::-moz-focus-inner { 147 | border: 0; 148 | padding: 0; 149 | } 150 | textarea { 151 | overflow: auto; 152 | vertical-align: top; 153 | } 154 | table { 155 | border-collapse: collapse; 156 | border-spacing: 0; 157 | } 158 | 159 | img { 160 | max-width: 100%; 161 | vertical-align: middle; 162 | } 163 | 164 | html { 165 | scroll-behavior: smooth; 166 | } 167 | -------------------------------------------------------------------------------- /scss/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | // variables 2 | 3 | @mixin transform__one { 4 | transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); 5 | -webkit-transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); 6 | -moz-transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); 7 | } 8 | -------------------------------------------------------------------------------- /scss/abstracts/_utils.scss: -------------------------------------------------------------------------------- 1 | // utilities classes 2 | 3 | .row { 4 | display: flex; 5 | flex-direction: row; 6 | align-items: center; 7 | justify-content: space-between; 8 | } 9 | 10 | .center-item { 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .start-item { 18 | display: flex; 19 | flex-direction: column; 20 | align-items: flex-start; 21 | justify-content: flex-start; 22 | } 23 | 24 | .section { 25 | max-width: 100%; 26 | width: 100%; 27 | min-height: 100vh; 28 | position: relative; 29 | } 30 | 31 | .text-box { 32 | position: relative; 33 | overflow: hidden; 34 | line-height: 2; 35 | width: 100%; 36 | height: auto; 37 | } 38 | 39 | .img-box { 40 | width: 100%; 41 | height: 100%; 42 | position: relative; 43 | overflow: hidden; 44 | } 45 | 46 | .transition { 47 | transition: all 0.5s ease; 48 | } 49 | 50 | .title { 51 | font-size: $h1-font; 52 | font-weight: 600; 53 | letter-spacing: 8px; 54 | } 55 | 56 | .title-2 { 57 | font-size: $h2-font; 58 | } 59 | 60 | .title-3 { 61 | font-size: $h5-font; 62 | } 63 | 64 | .sub-title { 65 | font-size: $h6-font; 66 | } 67 | 68 | .full-size { 69 | width: 100%; 70 | height: 100%; 71 | } 72 | 73 | .pad-section { 74 | padding: 10rem 0; 75 | } 76 | 77 | .flex { 78 | display: flex; 79 | } 80 | 81 | .paragraph { 82 | font-family: $pop-font; 83 | font-size: $small-font; 84 | line-height: 2; 85 | color: $dark; 86 | font-weight: 400; 87 | } 88 | -------------------------------------------------------------------------------- /scss/components/_btns.scss: -------------------------------------------------------------------------------- 1 | // btns styles 2 | 3 | button, 4 | a { 5 | font-family: $pop-font; 6 | } 7 | 8 | .hover-btn { 9 | font-size: $small-font; 10 | font-weight: 500; 11 | padding: 0.3rem 0.5rem; 12 | overflow: hidden; 13 | cursor: pointer; 14 | 15 | &:hover { 16 | color: $color; 17 | } 18 | 19 | &::after { 20 | content: ""; 21 | position: absolute; 22 | bottom: 0; 23 | left: 0; 24 | width: 100%; 25 | height: 1px; 26 | background-color: $color; 27 | transform-origin: right; 28 | transform: scaleX(0); 29 | @include transform__one; 30 | } 31 | 32 | &:hover::after { 33 | transform-origin: left; 34 | transform: scaleX(1); 35 | } 36 | } 37 | 38 | .logo-btn { 39 | width: fit-content; 40 | height: fit-content; 41 | 42 | img { 43 | width: 10rem; 44 | height: fit-content; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /scss/components/_hamb.scss: -------------------------------------------------------------------------------- 1 | // hamb style 2 | .hamb__menu { 3 | position: fixed; 4 | top: 0; 5 | right: 0; 6 | width: 40%; 7 | height: 100%; 8 | z-index: 300; 9 | background-color: $white; 10 | align-items: flex-start; 11 | justify-content: flex-start; 12 | padding: 8vh 10vw; 13 | overflow: hidden; 14 | will-change: transform; 15 | transform: translateY(-100%); 16 | 17 | a.close-btn { 18 | position: absolute; 19 | top: 4rem; 20 | right: 4rem; 21 | color: $color; 22 | font-weight: 500; 23 | } 24 | 25 | &.active { 26 | transform: translateY(0%); 27 | } 28 | 29 | .hamb-links { 30 | p { 31 | color: $color; 32 | font-weight: 500; 33 | } 34 | 35 | a { 36 | margin-left: 3rem; 37 | font-size: $h3-font; 38 | font-weight: 500; 39 | color: $dark; 40 | font-family: $can-font; 41 | padding: 0.6rem 1rem; 42 | transform: translateX(-50vw); 43 | opacity: 0; 44 | 45 | &:hover { 46 | font-style: italic; 47 | color: $color; 48 | } 49 | } 50 | } 51 | 52 | .hamb-links-two { 53 | margin-top: 2rem; 54 | 55 | p { 56 | color: $color; 57 | font-weight: 500; 58 | } 59 | 60 | a { 61 | margin-left: 3rem; 62 | font-size: $small-font; 63 | font-weight: 500; 64 | color: $dark; 65 | padding: 0.4rem 0; 66 | opacity: 0; 67 | transform: translateY(5rem); 68 | 69 | &:nth-of-type(1) { 70 | margin-top: 1rem; 71 | } 72 | 73 | &:hover { 74 | color: $color; 75 | } 76 | } 77 | } 78 | 79 | p.dev-p { 80 | position: absolute; 81 | bottom: 2rem; 82 | right: 2rem; 83 | 84 | span { 85 | a { 86 | color: $color; 87 | } 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /scss/components/_locoscroll.scss: -------------------------------------------------------------------------------- 1 | /*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 2 | html.has-scroll-smooth { 3 | overflow: hidden; 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | right: 0; 8 | bottom: 0; 9 | } 10 | html.has-scroll-dragging { 11 | -webkit-user-select: none; 12 | -moz-user-select: none; 13 | -ms-user-select: none; 14 | user-select: none; 15 | } 16 | .has-scroll-smooth body { 17 | overflow: hidden; 18 | } 19 | .has-scroll-smooth [data-scroll-container] { 20 | min-height: 100vh; 21 | } 22 | [data-scroll-direction="horizontal"] [data-scroll-container] { 23 | display: inline-block; 24 | height: 100vh; 25 | white-space: nowrap; 26 | } 27 | [data-scroll-direction="horizontal"] [data-scroll-section] { 28 | display: inline-block; 29 | height: 100%; 30 | vertical-align: top; 31 | white-space: nowrap; 32 | } 33 | .c-scrollbar { 34 | height: 100%; 35 | opacity: 0; 36 | position: absolute; 37 | right: 0; 38 | top: 0; 39 | transform-origin: center right; 40 | transition: transform 0.3s, opacity 0.3s; 41 | width: 11px; 42 | } 43 | .c-scrollbar:hover { 44 | transform: scaleX(1.45); 45 | } 46 | .c-scrollbar:hover, 47 | .has-scroll-dragging .c-scrollbar, 48 | .has-scroll-scrolling .c-scrollbar { 49 | opacity: 1; 50 | } 51 | [data-scroll-direction="horizontal"] .c-scrollbar { 52 | bottom: 0; 53 | height: 10px; 54 | top: auto; 55 | transform: scaleY(1); 56 | width: 100%; 57 | } 58 | [data-scroll-direction="horizontal"] .c-scrollbar:hover { 59 | transform: scaleY(1.3); 60 | } 61 | .c-scrollbar_thumb { 62 | background-color: #000; 63 | border-radius: 10px; 64 | cursor: -webkit-grab; 65 | cursor: grab; 66 | margin: 2px; 67 | opacity: 0.5; 68 | position: absolute; 69 | right: 0; 70 | top: 0; 71 | width: 7px; 72 | display: none; 73 | } 74 | .has-scroll-dragging .c-scrollbar_thumb { 75 | cursor: -webkit-grabbing; 76 | cursor: grabbing; 77 | } 78 | [data-scroll-direction="horizontal"] .c-scrollbar_thumb { 79 | bottom: 0; 80 | right: auto; 81 | } 82 | 83 | ::-webkit-scrollbar { 84 | display: none; 85 | } 86 | -------------------------------------------------------------------------------- /scss/layouts/_footer.scss: -------------------------------------------------------------------------------- 1 | // footer 2 | 3 | footer { 4 | background-color: $black; 5 | 6 | .mini-container { 7 | background-color: $soft; 8 | height: 600px; 9 | padding: 3rem 7rem; 10 | 11 | .left-foot { 12 | flex: 0 0 60%; 13 | max-width: 60%; 14 | 15 | p { 16 | font-size: $small-font; 17 | font-weight: 500; 18 | } 19 | 20 | h1 { 21 | color: $color; 22 | font-weight: 500; 23 | margin-top: 2rem; 24 | } 25 | 26 | .footer-links { 27 | width: 100%; 28 | align-items: flex-start; 29 | margin-top: 4rem; 30 | 31 | .left-links, 32 | .right-links { 33 | flex: 0 0 50%; 34 | max-width: 50%; 35 | display: flex; 36 | flex-direction: column; 37 | align-items: flex-start; 38 | justify-content: flex-start; 39 | 40 | p { 41 | padding: 1rem 0.5rem; 42 | color: $color; 43 | font-weight: 600; 44 | } 45 | 46 | a { 47 | color: $dark; 48 | 49 | &:hover { 50 | color: $color; 51 | } 52 | } 53 | } 54 | } 55 | } 56 | 57 | .right-foot { 58 | flex: 0 0 40%; 59 | max-width: 40%; 60 | 61 | p { 62 | margin-top: 4rem; 63 | font-size: $a-font; 64 | color: $strong; 65 | letter-spacing: 2px; 66 | font-family: $can-font; 67 | font-weight: 600; 68 | 69 | span { 70 | a { 71 | color: $color; 72 | } 73 | } 74 | } 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /scss/layouts/_layout.scss: -------------------------------------------------------------------------------- 1 | // wrapper and scroll container 2 | 3 | .wrapper { 4 | width: 100%; 5 | height: 100%; 6 | 7 | .scroll__container { 8 | width: 100%; 9 | height: 100%; 10 | } 11 | } 12 | 13 | // container and grid system 14 | 15 | .container { 16 | max-width: 1300px; 17 | margin: 0 auto; 18 | width: 100%; 19 | height: 100%; 20 | position: relative; 21 | } 22 | 23 | .mini-container { 24 | max-width: 1200px; 25 | margin: 0 auto; 26 | width: 100%; 27 | height: 100%; 28 | position: relative; 29 | } 30 | 31 | .nav__container { 32 | max-width: 90%; 33 | margin: 0 auto; 34 | } 35 | -------------------------------------------------------------------------------- /scss/layouts/_navbar.scss: -------------------------------------------------------------------------------- 1 | // nav 2 | 3 | .nav { 4 | width: 100%; 5 | height: fit-content; 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | z-index: 300; 10 | transition: all 0.5s ease; 11 | 12 | &.active { 13 | pointer-events: none; 14 | 15 | .nav-btn { 16 | opacity: 0; 17 | } 18 | } 19 | 20 | .shop-btn { 21 | width: 6rem; 22 | height: fit-content; 23 | 24 | img { 25 | width: $small-font; 26 | height: $small-font; 27 | position: absolute; 28 | transform: scale(0.9); 29 | transform-origin: center; 30 | } 31 | 32 | div { 33 | position: relative; 34 | color: $dark; 35 | 36 | :hover { 37 | color: $color; 38 | } 39 | 40 | &.img-box { 41 | width: $h4-font; 42 | height: $h4-font; 43 | background-color: $dark; 44 | border-radius: 50%; 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "./_bass"; 2 | @import "./_reset"; 3 | 4 | @import "./abstracts/_utils"; 5 | @import "./abstracts/_mixins"; 6 | 7 | @import "./layouts/_layout"; 8 | @import "./layouts/_navbar"; 9 | @import "./layouts/_footer"; 10 | 11 | @import "./components/_btns"; 12 | @import "./components/_hamb"; 13 | @import "./components/_locoscroll"; 14 | 15 | @import "./pages/_home"; 16 | -------------------------------------------------------------------------------- /scss/pages/_home.scss: -------------------------------------------------------------------------------- 1 | // banner 2 | 3 | .banner { 4 | overflow: hidden; 5 | 6 | .bg-container { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | overflow: hidden; 11 | transform: scale(1.3); 12 | z-index: 1; 13 | 14 | .parallax-container { 15 | background-size: cover !important; 16 | background-position: center !important; 17 | transform-origin: top; 18 | } 19 | } 20 | 21 | h1 { 22 | position: relative; 23 | z-index: 2; 24 | color: $white; 25 | } 26 | } 27 | 28 | .about { 29 | .container { 30 | .text-box { 31 | text-align: center; 32 | position: relative; 33 | 34 | &:nth-of-type(2) { 35 | margin-top: 2rem; 36 | } 37 | 38 | h6 { 39 | font-size: $small-font; 40 | font-family: $pop-font; 41 | font-weight: 600; 42 | color: $color; 43 | letter-spacing: 4px; 44 | line-height: $h4-font; 45 | 46 | span { 47 | padding: $small-font; 48 | border: 2px solid $color; 49 | line-height: $a-font; 50 | border-radius: 50%; 51 | font-family: $can-font; 52 | } 53 | } 54 | 55 | h1 { 56 | font-weight: 500; 57 | line-height: 1.5; 58 | text-align: center; 59 | align-items: center; 60 | justify-content: center; 61 | word-spacing: 4px; 62 | 63 | div { 64 | width: 13rem; 65 | height: 8rem; 66 | overflow: hidden; 67 | margin: 0 0.5rem; 68 | 69 | @media only screen and (max-width: 1060px) { 70 | width: 10rem; 71 | height: 6rem; 72 | } 73 | 74 | img { 75 | transition: all 0.5s ease; 76 | transform-origin: center; 77 | } 78 | 79 | &:hover img { 80 | transform: scale(1.2); 81 | } 82 | } 83 | } 84 | } 85 | } 86 | } 87 | 88 | .intro { 89 | max-height: 100vh; 90 | 91 | .mini-container { 92 | height: 800px; 93 | align-items: flex-end; 94 | justify-content: flex-end; 95 | 96 | @media only screen and (max-width: 1060px) { 97 | padding: 0 2rem; 98 | } 99 | 100 | .intro-content { 101 | flex: 0 0 45%; 102 | max-width: 45%; 103 | position: relative; 104 | justify-content: flex-end; 105 | padding: 5rem 0; 106 | 107 | .text-box:not(.parallax-box) { 108 | padding: 1.2rem 0; 109 | border-top: 1px solid $line; 110 | 111 | &:nth-of-type(1) { 112 | margin-top: 2rem; 113 | } 114 | 115 | &:nth-of-type(3) { 116 | border-bottom: 1px solid $line; 117 | } 118 | 119 | .text-box p { 120 | font-size: $a-font; 121 | } 122 | } 123 | .parallax-box { 124 | position: absolute; 125 | top: 10vh; 126 | left: -20rem; 127 | width: 40rem; 128 | height: fit-content; 129 | z-index: 4; 130 | pointer-events: none; 131 | 132 | h1 { 133 | line-height: 1.2; 134 | color: $color; 135 | font-weight: 500; 136 | } 137 | } 138 | } 139 | 140 | .intro-pic { 141 | position: absolute; 142 | top: 0; 143 | left: 0; 144 | flex: 0 0 50%; 145 | max-width: 50%; 146 | height: 100%; 147 | 148 | .img-box { 149 | position: absolute; 150 | z-index: 2; 151 | height: 80%; 152 | width: 30rem; 153 | top: 2rem; 154 | 155 | img { 156 | transform-origin: top; 157 | transform: scale(1.4, 1); 158 | width: 100%; 159 | height: 100%; 160 | } 161 | } 162 | 163 | .bg-container { 164 | width: 100%; 165 | height: 60%; 166 | position: absolute; 167 | bottom: 0; 168 | background-color: $decor; 169 | } 170 | } 171 | } 172 | } 173 | 174 | .news { 175 | max-height: 100vh; 176 | overflow: hidden; 177 | 178 | .bg-container { 179 | position: absolute; 180 | top: 0; 181 | left: 0; 182 | transform: scale(1.2, 1.4); 183 | z-index: 1; 184 | 185 | .parallax-container { 186 | background-position: top !important; 187 | background-size: cover !important; 188 | transform-origin: top; 189 | } 190 | } 191 | 192 | .text-box { 193 | z-index: 3; 194 | width: 215rem; 195 | 196 | h1 { 197 | font-weight: 600; 198 | font-style: italic; 199 | color: $white; 200 | animation: roll 15s linear infinite; 201 | width: 215rem; 202 | text-shadow: 215rem 0 $white, calc(215rem * 2) 0 $white, 203 | calc(215rem * 3) 0 $white; 204 | } 205 | } 206 | 207 | .mini-container { 208 | position: absolute; 209 | height: 100vh; 210 | 211 | .img-box { 212 | position: absolute; 213 | right: 0; 214 | width: 24rem; 215 | height: 35rem; 216 | z-index: 5; 217 | right: 0; 218 | top: 50%; 219 | transform: translateY(-50%); 220 | 221 | @media only screen and (max-width: 1060px) { 222 | right: 2rem; 223 | } 224 | 225 | &:hover img { 226 | filter: grayscale(0.4); 227 | } 228 | 229 | img { 230 | width: 100%; 231 | height: 100%; 232 | transform: scale(1.8, 1); 233 | align-tracks: center; 234 | transition: all 0.5s ease; 235 | } 236 | } 237 | } 238 | } 239 | 240 | @keyframes roll { 241 | 0% { 242 | transform: translateX(0); 243 | } 244 | 100% { 245 | transform: translateX(-100%); 246 | } 247 | } 248 | 249 | .challange { 250 | .container { 251 | h1 { 252 | font-weight: 500; 253 | font-style: italic; 254 | text-align: center; 255 | line-height: 1.2; 256 | } 257 | } 258 | } 259 | 260 | .contact { 261 | max-height: 100vh; 262 | 263 | .left-contact { 264 | flex: 0 0 50%; 265 | max-width: 50%; 266 | height: 100vh; 267 | background-color: $black; 268 | text-align: center; 269 | 270 | p { 271 | font-size: $a-font; 272 | font-weight: 600; 273 | color: $white; 274 | letter-spacing: 2px; 275 | } 276 | 277 | h4 { 278 | font-style: italic; 279 | color: $color; 280 | font-weight: 500; 281 | line-height: 1.3; 282 | width: 30rem; 283 | margin: 2rem 0 3rem 0; 284 | } 285 | 286 | form { 287 | width: 60%; 288 | 289 | input[type="email"] { 290 | border: 1px solid $color; 291 | padding: 1.5rem 1rem; 292 | background-color: transparent; 293 | font-size: $a-font; 294 | font-weight: 500; 295 | color: $white; 296 | width: 100%; 297 | height: fit-content; 298 | } 299 | 300 | input[type="submit"] { 301 | border: 1px solid $color; 302 | color: $strong; 303 | padding: 1.5rem 1rem; 304 | width: 100%; 305 | height: 100%; 306 | background-color: transparent; 307 | font-size: $a-font; 308 | text-transform: uppercase; 309 | font-weight: 300; 310 | 311 | &:hover { 312 | color: $white; 313 | background-color: $strong; 314 | border: 1px solid $strong; 315 | } 316 | } 317 | } 318 | } 319 | 320 | .right-contact { 321 | flex: 0 0 50%; 322 | max-width: 50%; 323 | height: 100vh; 324 | position: relative; 325 | background-color: $line; 326 | 327 | h1 { 328 | font-weight: 500; 329 | line-height: 1.2; 330 | } 331 | 332 | .img-box { 333 | position: absolute; 334 | top: 50%; 335 | left: 50%; 336 | transform: translate(-50%, -50%); 337 | width: 24rem; 338 | height: 32rem; 339 | opacity: 0.9; 340 | 341 | img { 342 | transform: center; 343 | transform: scale(1.4, 1.7); 344 | } 345 | } 346 | } 347 | } 348 | 349 | .oth { 350 | background-color: $white; 351 | 352 | .mini-container { 353 | p.p-one { 354 | font-size: $a-font; 355 | font-weight: 600; 356 | } 357 | 358 | h1 { 359 | font-weight: 600; 360 | color: $color; 361 | letter-spacing: 5px; 362 | margin-top: 2rem; 363 | } 364 | 365 | .oth-content { 366 | margin-top: 3rem; 367 | align-items: flex-start; 368 | position: relative; 369 | margin-bottom: 5rem; 370 | 371 | @media only screen and (max-width: 1060px) { 372 | padding: 0 2rem; 373 | } 374 | 375 | :after { 376 | content: ""; 377 | height: 100%; 378 | width: 1px; 379 | background-color: $line; 380 | top: 0; 381 | left: 50%; 382 | transform: translateX(-50%); 383 | position: absolute; 384 | z-index: 2; 385 | } 386 | 387 | .left-oth { 388 | flex: 0 0 50%; 389 | max-width: 50%; 390 | 391 | p { 392 | width: 90%; 393 | } 394 | 395 | p.thin-p { 396 | font-weight: 600; 397 | margin-bottom: 2rem; 398 | } 399 | } 400 | 401 | .right-oth { 402 | flex: 0 0 50%; 403 | max-width: 50%; 404 | 405 | p { 406 | width: 90%; 407 | 408 | &:nth-last-of-type(2) { 409 | margin-bottom: 2rem; 410 | } 411 | } 412 | } 413 | } 414 | 415 | a.btn { 416 | font-size: $small-font; 417 | font-weight: 600; 418 | color: $dark; 419 | background-color: $decor; 420 | width: 14rem; 421 | height: 4rem; 422 | position: relative; 423 | overflow: hidden; 424 | 425 | &::after { 426 | content: attr(data-name); 427 | font-size: $small-font; 428 | font-weight: 500; 429 | width: 100%; 430 | height: 100%; 431 | position: absolute; 432 | background-color: $black; 433 | color: $white; 434 | display: flex; 435 | align-items: center; 436 | justify-content: center; 437 | top: 0; 438 | left: 0; 439 | transform: translateY(100%); 440 | } 441 | 442 | span { 443 | position: absolute; 444 | transition: all 0.5s ease; 445 | } 446 | 447 | &:hover span { 448 | transform: translateY(5rem); 449 | } 450 | 451 | &:hover::after { 452 | transform: translateY(0); 453 | } 454 | } 455 | } 456 | } 457 | 458 | @media only screen and (max-width: 1060px) { 459 | .title-2 { 460 | font-size: 6vw; 461 | } 462 | .title-3 { 463 | font-size: 6vw; 464 | } 465 | .sub-title { 466 | font-size: 3vw; 467 | } 468 | } 469 | --------------------------------------------------------------------------------