├── LICENSE ├── README.md ├── assets ├── css │ └── style.css ├── fonts │ ├── REFAULT.ttf │ ├── REFAULT.woff │ └── REFAULT.woff2 ├── images │ ├── about-img-shadow.png │ ├── about-img.png │ ├── character-1.png │ ├── character-2.png │ ├── character-3.png │ ├── footer-bg.jpg │ ├── footer-bottom-img.png │ ├── gallery-img-1.jpg │ ├── gallery-img-2.jpg │ ├── gallery-img-3.jpg │ ├── gallery-img-4.jpg │ ├── gamex.png │ ├── gamex.svg │ ├── gears-card-bg.png │ ├── gears-img-1.png │ ├── gears-img-2.png │ ├── gears-img-3.png │ ├── hero-banner.jpg │ ├── logo.svg │ ├── newsletter-bg.jpg │ ├── newsletter-img.png │ ├── prize-img.png │ ├── section-wrapper-bg.jpg │ ├── section_line.png │ ├── team-member-1.png │ ├── team-member-10.png │ ├── team-member-11.png │ ├── team-member-12.png │ ├── team-member-13.png │ ├── team-member-14.png │ ├── team-member-2.png │ ├── team-member-3.png │ ├── team-member-4.png │ ├── team-member-5.png │ ├── team-member-6.png │ ├── team-member-7.png │ ├── team-member-8.png │ ├── team-member-9.png │ ├── winner-img-1.png │ └── winner-img-2.png └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images ├── desktop.png └── project-logo.png └── style-guide.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Ashutosh Kumar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codeaashu/GameX) 4 | ![GitHub stars](https://img.shields.io/github/stars/codeaashu/GameX?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codeaashu/GameX?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/warrior_aashuu?style=social)](https://twitter.com/intent/follow?screen_name=warrior_aashuu) 7 | 8 |
9 |
10 | 11 | 12 | 13 |

GameX - Gaming website

14 | 15 | GameX is a fully responsive eSports gaming website that organize gaming tournaments,
Responsive for all devices, built using HTML, CSS, and JavaScript. 16 | 17 | ➥ Live Demo 18 | 19 |
20 | 21 |
22 | 23 | ### Demo Screeshots 24 | 25 | ![GameX Desktop Demo](./readme-images/desktop.png "Desktop Demo") 26 | 27 | ### Prerequisites 28 | 29 | Before you begin, ensure you have met the following requirements: 30 | 31 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 32 | 33 | ### Run Locally 34 | 35 | To run **GameX** locally, run this command on your git bash: 36 | 37 | Linux and macOS: 38 | 39 | ```bash 40 | sudo git clone https://github.com/codeaashu/GameX.git 41 | ``` 42 | 43 | Windows: 44 | 45 | ```bash 46 | git clone https://github.com/codeaashu/GameX.git 47 | ``` 48 | 49 | ### Contact 50 | 51 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codeaashu). 52 | 53 | ### License 54 | 55 | This project is **free to use** and does not contains any license. 56 |
57 | 58 | ![windows-mockup-08 (1)](https://github.com/codeaashu/GameX/assets/130897584/b83de2df-50e7-459c-a8cd-7df5c10585b8) 59 | 60 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2024 @codeaashu 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --raisin-black-1: hsl(234, 14%, 14%); 24 | --raisin-black-2: hsl(231, 12%, 12%); 25 | --raisin-black-3: hsl(228, 12%, 17%); 26 | --eerie-black: hsl(240, 11%, 9%); 27 | --light-gray: hsl(0, 0%, 80%); 28 | --platinum: hsl(0, 4%, 91%); 29 | --xiketic: hsl(275, 24%, 10%); 30 | --orange: hsl(31, 100%, 51%); 31 | --white: hsl(0, 0%, 100%); 32 | --onyx: hsl(240, 5%, 26%); 33 | 34 | /** 35 | * typography 36 | */ 37 | 38 | --ff-refault: "Refault", Georgia; 39 | --ff-oswald: 'Oswald', sans-serif; 40 | --ff-poppins: 'Poppins', sans-serif; 41 | 42 | --fs-1: 54px; 43 | --fs-2: 34px; 44 | --fs-3: 30px; 45 | --fs-4: 26px; 46 | --fs-5: 22px; 47 | --fs-6: 20px; 48 | --fs-7: 18px; 49 | --fs-8: 15px; 50 | --fs-9: 14px; 51 | --fs-10: 13px; 52 | --fs-11: 12px; 53 | 54 | --fw-400: 400; 55 | --fw-500: 500; 56 | --fw-700: 700; 57 | 58 | /** 59 | * transition 60 | */ 61 | 62 | --transition-1: 0.15s ease-in-out; 63 | --transition-2: 0.15s ease-in; 64 | --transition-3: 0.25s ease-out; 65 | 66 | /** 67 | * spacing 68 | */ 69 | 70 | --section-padding: 60px; 71 | 72 | /** 73 | * clip path 74 | */ 75 | 76 | --polygon-1: polygon(90% 0, 100% 34%, 100% 100%, 10% 100%, 0 66%, 0 0); 77 | --polygon-2: polygon(0 0, 100% 0%, 82% 100%, 0% 100%); 78 | --polygon-3: polygon(0 0, 100% 0%, 100% 100%, 18% 100%); 79 | --polygon-4: polygon(96% 0, 100% 36%, 100% 100%, 4% 100%, 0 66%, 0 0); 80 | 81 | } 82 | 83 | 84 | 85 | 86 | 87 | /*-----------------------------------*\ 88 | #RESET 89 | \*-----------------------------------*/ 90 | 91 | *, *::before, *::after { 92 | margin: 0; 93 | padding: 0; 94 | box-sizing: border-box; 95 | } 96 | 97 | a { text-decoration: none; } 98 | 99 | li { list-style: none; } 100 | 101 | a, 102 | img, 103 | span, 104 | input, 105 | button, 106 | ion-icon { display: block; } 107 | 108 | button { 109 | font: inherit; 110 | background: none; 111 | border: none; 112 | cursor: pointer; 113 | } 114 | 115 | input { 116 | font: inherit; 117 | width: 100%; 118 | border: none; 119 | } 120 | 121 | html { 122 | font-family: var(--ff-poppins); 123 | scroll-behavior: smooth; 124 | } 125 | 126 | body { overflow-x: hidden; } 127 | 128 | body.active { overflow-y: hidden; } 129 | 130 | ::-webkit-scrollbar { width: 8px; } 131 | 132 | ::-webkit-scrollbar-track { background: var(--raisin-black-2); } 133 | 134 | ::-webkit-scrollbar-thumb { 135 | background: var(--orange); 136 | border-radius: 10px; 137 | } 138 | 139 | 140 | 141 | 142 | 143 | /*-----------------------------------*\ 144 | #CUSTOM FONT 145 | \*-----------------------------------*/ 146 | 147 | /* Webfont: Refault-Italic */ 148 | @font-face { 149 | font-family: 'Refault'; 150 | src: url('../fonts/REFAULT.eot'); /* IE9 Compat Modes */ 151 | src: url('../fonts/REFAULT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 152 | url('../fonts/REFAULT.woff') format('woff'), /* Modern Browsers */ 153 | url('../fonts/REFAULT.woff2') format('woff2'), /* Modern Browsers */ 154 | url('../fonts/REFAULT.ttf') format('truetype'); /* Safari, Android, iOS */ 155 | font-style: italic; 156 | font-weight: normal; 157 | text-rendering: optimizeLegibility; 158 | } 159 | 160 | 161 | 162 | 163 | 164 | /*-----------------------------------*\ 165 | #REUSED STYLE 166 | \*-----------------------------------*/ 167 | 168 | .container { padding-inline: 15px; } 169 | 170 | .h1 { 171 | color: var(--white); 172 | font-family: var(--ff-refault); 173 | font-size: var(--fs-1); 174 | font-weight: var(--fw-400); 175 | text-transform: uppercase; 176 | } 177 | 178 | .h2 { 179 | font-size: var(--fs-2); 180 | color: var(--white); 181 | line-height: 1.2; 182 | text-transform: uppercase; 183 | font-family: var(--ff-oswald); 184 | } 185 | 186 | .h3 { 187 | font-family: var(--ff-oswald); 188 | font-size: var(--fs-2); 189 | text-transform: uppercase; 190 | line-height: 1.2; 191 | } 192 | 193 | .btn { 194 | color: var(--white); 195 | font-family: var(--ff-oswald); 196 | font-size: var(--fs-6); 197 | font-weight: var(--fw-500); 198 | letter-spacing: 1px; 199 | text-transform: uppercase; 200 | display: flex; 201 | justify-content: center; 202 | align-items: center; 203 | gap: 10px; 204 | padding: 13px 34px; 205 | clip-path: var(--polygon-1); 206 | transition: var(--transition-1); 207 | } 208 | 209 | .btn-primary { background: var(--orange); } 210 | 211 | .btn-primary:is(:hover, :focus) { background: var(--raisin-black-1); } 212 | 213 | .btn-secondary { 214 | background: var(--white); 215 | color: var(--orange); 216 | } 217 | 218 | .btn-secondary:is(:hover, :focus) { 219 | background: var(--raisin-black-1); 220 | color: var(--white); 221 | } 222 | 223 | .btn-link:is(:hover, :focus) { color: var(--orange); } 224 | 225 | .has-scrollbar::-webkit-scrollbar { height: 6px; } 226 | 227 | .has-scrollbar::-webkit-scrollbar-button { width: 40px; } 228 | 229 | .section-title { 230 | position: relative; 231 | text-align: center; 232 | margin-bottom: 80px; 233 | } 234 | 235 | .section-title::before, 236 | .section-title::after { 237 | content: ""; 238 | position: absolute; 239 | bottom: -20px; 240 | left: 50%; 241 | transform: translateX(-50%); 242 | height: 5px; 243 | width: 120px; 244 | background: var(--orange); 245 | border-radius: 0 0 5px 5px; 246 | } 247 | 248 | .section-title::before { 249 | bottom: -23px; 250 | height: 4px; 251 | width: 30px; 252 | } 253 | 254 | 255 | 256 | 257 | 258 | /*-----------------------------------*\ 259 | #HEADER 260 | \*-----------------------------------*/ 261 | 262 | .header { 263 | position: fixed; 264 | top: 0; 265 | left: 0; 266 | width: 100%; 267 | background: var(--raisin-black-1); 268 | box-shadow: 0 3px 27px hsla(0, 0%, 0%, 0.5); 269 | padding-block: 20px; 270 | z-index: 4; 271 | } 272 | 273 | .header .container { 274 | display: flex; 275 | justify-content: space-between; 276 | align-items: center; 277 | } 278 | 279 | .header-actions { display: none; } 280 | 281 | .nav-open-btn { 282 | color: var(--white); 283 | font-size: 40px; 284 | padding: 5px; 285 | } 286 | 287 | .nav-open-btn ion-icon { --ionicon-stroke-width: 40px; } 288 | 289 | .navbar { 290 | position: fixed; 291 | top: 0; 292 | right: -300px; 293 | width: 100%; 294 | max-width: 300px; 295 | background: var(--raisin-black-2); 296 | height: 100%; 297 | box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.5); 298 | visibility: hidden; 299 | z-index: 2; 300 | transition: var(--transition-2); 301 | } 302 | 303 | 304 | .navbar.active { 305 | right: 0; 306 | visibility: visible; 307 | transition: var(--transition-3); 308 | } 309 | 310 | .navbar-top { 311 | display: flex; 312 | justify-content: space-between; 313 | align-items: center; 314 | padding: 25px; 315 | } 316 | 317 | .nav-close-btn { 318 | color: var(--orange); 319 | font-size: 25px; 320 | padding: 10px; 321 | transform: translateX(15px); 322 | } 323 | 324 | .nav-close-btn ion-icon { --ionicon-stroke-width: 70px; } 325 | 326 | .navbar-list { 327 | border-top: 1px solid hsla(0, 0%, 100%, 0.1); 328 | margin-bottom: 30px; 329 | } 330 | 331 | .navbar-link { 332 | color: var(--white); 333 | font-size: 15px; 334 | padding: 10px 25px; 335 | border-bottom: 1px solid hsla(0, 0%, 100%, 0.1); 336 | font-weight: var(--fw-500); 337 | transition: 0.15s ease-in-out; 338 | } 339 | 340 | .navbar-link:is(:hover, :focus) { color: var(--orange); } 341 | 342 | .nav-social-list { 343 | display: flex; 344 | justify-content: center; 345 | align-items: center; 346 | gap: 15px; 347 | } 348 | 349 | .social-link { 350 | color: var(--orange); 351 | font-size: 18px; 352 | } 353 | 354 | .overlay { 355 | position: fixed; 356 | inset: 0; 357 | pointer-events: none; 358 | z-index: 1; 359 | transition: var(--transition-2); 360 | } 361 | 362 | .overlay.active { 363 | background: hsla(0, 0%, 0%, 0.7); 364 | pointer-events: all; 365 | transition: var(--transition-3); 366 | } 367 | 368 | 369 | 370 | 371 | 372 | /*-----------------------------------*\ 373 | #HERO 374 | \*-----------------------------------*/ 375 | 376 | .hero { 377 | background: url("../images/hero-banner.jpg") no-repeat; 378 | background-size: cover; 379 | background-position: top center; 380 | margin-top: 90px; 381 | padding: var(--section-padding) 0; 382 | height: 100vh; 383 | max-height: 1000px; 384 | display: flex; 385 | justify-content: center; 386 | align-items: center; 387 | text-align: center; 388 | } 389 | 390 | .hero-subtitle { 391 | color: var(--white); 392 | font-family: var(--ff-oswald); 393 | font-size: var(--fs-7); 394 | font-weight: var(--fw-500); 395 | text-transform: uppercase; 396 | letter-spacing: 12px; 397 | text-shadow: 0 7px hsla(0, 0%, 0%, 0.4); 398 | margin-bottom: 15px; 399 | } 400 | 401 | .hero-title { margin-bottom: 10px; } 402 | 403 | .btn-group { 404 | display: flex; 405 | flex-wrap: wrap; 406 | justify-content: center; 407 | align-items: center; 408 | } 409 | 410 | .hero .btn-primary ion-icon { font-size: 25px; } 411 | 412 | 413 | 414 | 415 | 416 | /*-----------------------------------*\ 417 | #ABOUT 418 | \*-----------------------------------*/ 419 | 420 | .section-wrapper { 421 | background: url("../images/section-wrapper-bg.jpg") no-repeat; 422 | background-size: cover; 423 | background-position: center; 424 | } 425 | 426 | .about { 427 | background: url("../images/about-img-shadow.png") no-repeat; 428 | background-size: 100%; 429 | background-position: center; 430 | padding: 120px 0 var(--section-padding); 431 | } 432 | 433 | .about-banner { margin-bottom: 40px; } 434 | 435 | .about-img { width: 100%; } 436 | 437 | .character { display: none; } 438 | 439 | .about-content { 440 | background: var(--raisin-black-1); 441 | color: var(--white); 442 | padding: 40px 20px; 443 | border-radius: 4px; 444 | box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2); 445 | } 446 | 447 | .about-subtitle { 448 | color: var(--orange); 449 | font-family: var(--ff-oswald); 450 | font-size: var(--fs-8); 451 | font-weight: var(--fw-500); 452 | text-transform: uppercase; 453 | margin-bottom: 15px; 454 | } 455 | 456 | .about-title { 457 | font-family: var(--ff-oswald); 458 | font-size: var(--fs-2); 459 | line-height: 1.2; 460 | text-transform: uppercase; 461 | margin-bottom: 20px; 462 | } 463 | 464 | .about-title strong { color: var(--orange); } 465 | 466 | .about-text, 467 | .about-bottom-text { 468 | color: var(--light-gray); 469 | font-size: var(--fs-9); 470 | line-height: 1.8; 471 | letter-spacing: 0.5px; 472 | } 473 | 474 | .about-text { margin-bottom: 20px; } 475 | 476 | .about-bottom-text { 477 | display: flex; 478 | justify-content: flex-start; 479 | align-items: flex-start; 480 | gap: 8px; 481 | } 482 | 483 | .about-bottom-text ion-icon { 484 | color: var(--orange); 485 | font-size: 25px; 486 | --ionicon-stroke-width: 45px; 487 | } 488 | 489 | 490 | 491 | 492 | 493 | /*-----------------------------------*\ 494 | #TOURNAMENT 495 | \*-----------------------------------*/ 496 | 497 | .tournament { 498 | padding: var(--section-padding) 0; 499 | color: var(--white); 500 | text-align: center; 501 | } 502 | 503 | .tournament-content { margin-bottom: 50px; } 504 | 505 | .tournament-subtitle { 506 | color: var(--orange); 507 | font-family: var(--ff-oswald); 508 | font-weight: var(--fw-500); 509 | text-transform: uppercase; 510 | margin-bottom: 10px; 511 | } 512 | 513 | .tournament-title { margin-bottom: 20px; } 514 | 515 | .tournament-text { 516 | color: var(--light-gray); 517 | font-size: var(--fs-9); 518 | line-height: 1.8; 519 | margin-bottom: 30px; 520 | } 521 | 522 | .tournament .btn-primary { 523 | width: max-content; 524 | margin-inline: auto; 525 | } 526 | 527 | .tournament-prize { margin-bottom: 50px; } 528 | 529 | .tournament-prize-title { 530 | font-size: var(--fs-3); 531 | margin-bottom: 20px; 532 | } 533 | 534 | .tournament-prize data { 535 | background: var(--orange); 536 | color: var(--raisin-black-1); 537 | font-family: var(--ff-oswald); 538 | font-size: var(--fs-4); 539 | padding: 8px 42px; 540 | border-radius: 50px; 541 | } 542 | 543 | .tournament-prize img { margin-inline: auto; } 544 | 545 | .tournament-winners { 546 | background: var(--raisin-black-1); 547 | padding: 40px 30px; 548 | border-radius: 4px; 549 | box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2); 550 | } 551 | 552 | .tournament-winners-title { 553 | font-size: var(--fs-3); 554 | margin-bottom: 25px; 555 | } 556 | 557 | .tournament-winners-list { 558 | display: flex; 559 | flex-wrap: wrap; 560 | justify-content: center; 561 | align-items: center; 562 | gap: 20px; 563 | } 564 | 565 | .winner-card .card-banner { 566 | max-width: 90px; 567 | margin-inline: auto; 568 | margin-bottom: 15px; 569 | } 570 | 571 | .winner-card img { width: 100%; } 572 | 573 | .winner-card .card-title { 574 | background: var(--orange); 575 | width: max-content; 576 | margin-inline: auto; 577 | font-size: var(--fs-10); 578 | text-transform: uppercase; 579 | padding: 6px 10px; 580 | border-radius: 4px; 581 | } 582 | 583 | 584 | 585 | 586 | 587 | /*-----------------------------------*\ 588 | #GALLERY 589 | \*-----------------------------------*/ 590 | 591 | .gallery { padding: var(--section-padding) 0; } 592 | 593 | .gallery-list { 594 | display: flex; 595 | justify-content: flex-start; 596 | align-items: center; 597 | gap: 15px; 598 | margin: -15px; 599 | overflow-x: auto; 600 | padding-bottom: 15px; 601 | scroll-snap-type: inline mandatory; 602 | padding-inline: 15px; 603 | } 604 | 605 | .gallery-list li { 606 | min-width: 95%; 607 | scroll-snap-align: center; 608 | } 609 | 610 | .gallery-item img { 611 | width: 100%; 612 | border-radius: 4px; 613 | box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2); 614 | } 615 | 616 | 617 | 618 | 619 | 620 | /*-----------------------------------*\ 621 | #TEAM 622 | \*-----------------------------------*/ 623 | 624 | .team { padding: var(--section-padding) 0; } 625 | 626 | .team-list { 627 | display: flex; 628 | flex-wrap: wrap; 629 | justify-content: center; 630 | align-items: center; 631 | gap: 30px; 632 | margin-bottom: 70px; 633 | } 634 | 635 | .team-list li { max-width: 40%; } 636 | 637 | .team-member { 638 | position: relative; 639 | border-radius: 50%; 640 | border: 3px solid var(--raisin-black-3); 641 | transition: var(--transition-1); 642 | } 643 | 644 | .team-member:is(:hover, :focus) { border-color: var(--orange); } 645 | 646 | .team-member img { width: 100%; } 647 | 648 | .team-member:is(:hover, :focus) img { opacity: 0.5; } 649 | 650 | .team-member ion-icon { 651 | position: absolute; 652 | top: 50%; 653 | left: 50%; 654 | transform: translate(-50%, -50%); 655 | color: var(--orange); 656 | font-size: 50px; 657 | transition: var(--transition-1); 658 | opacity: 0; 659 | } 660 | 661 | .team-member:is(:hover, :focus) ion-icon { opacity: 1; } 662 | 663 | .team .btn-primary { margin-inline: auto; } 664 | 665 | 666 | 667 | 668 | 669 | /*-----------------------------------*\ 670 | #GEARS 671 | \*-----------------------------------*/ 672 | 673 | .gears { padding: var(--section-padding) 0; } 674 | 675 | .gears-list { 676 | display: grid; 677 | gap: 50px; 678 | } 679 | 680 | .gears-card .card-banner { 681 | position: relative; 682 | background: url("../images/gears-card-bg.png") no-repeat; 683 | background-size: contain; 684 | background-position: center; 685 | width: 100%; 686 | aspect-ratio: 2 / 1.7; 687 | display: grid; 688 | place-items: center; 689 | margin-bottom: 30px; 690 | } 691 | 692 | .gears .card-banner a { width: 100%; } 693 | 694 | .gears .card-banner img { 695 | width: 45%; 696 | margin-inline: auto; 697 | } 698 | 699 | .share, 700 | .card-time-wrapper { 701 | position: absolute; 702 | color: var(--orange); 703 | } 704 | 705 | .share { 706 | top: 25%; 707 | right: 8%; 708 | font-size: 20px; 709 | border: 2px solid var(--onyx); 710 | width: 45px; 711 | height: 45px; 712 | display: grid; 713 | place-items: center; 714 | border-radius: 50%; 715 | transition: var(--transition-1); 716 | } 717 | 718 | .share:is(:hover, :focus) { border-color: var(--orange); } 719 | 720 | .card-time-wrapper { 721 | top: 2%; 722 | right: 5%; 723 | font-family: var(--ff-oswald); 724 | font-size: var(--fs-9); 725 | font-weight: var(--fw-500); 726 | text-transform: uppercase; 727 | display: flex; 728 | justify-content: center; 729 | align-items: center; 730 | gap: 5px; 731 | } 732 | 733 | .card-time-wrapper ion-icon { 734 | font-size: 16px; 735 | --ionicon-stroke-width: 50px; 736 | } 737 | 738 | .gears .card-content { 739 | color: var(--white); 740 | margin-bottom: 25px; 741 | display: flex; 742 | justify-content: space-between; 743 | align-items: center; 744 | text-transform: uppercase; 745 | } 746 | 747 | .gears-card :is(.card-title, .card-prize) { 748 | font-family: var(--ff-oswald); 749 | font-size: var(--fs-5); 750 | font-weight: var(--fw-700); 751 | } 752 | 753 | .gears-card .card-title { margin-bottom: 5px; } 754 | 755 | .gears-card .card-subtitle { 756 | color: var(--light-gray); 757 | font-size: var(--fs-8); 758 | } 759 | 760 | .gears .card-actions { 761 | display: flex; 762 | justify-content: space-between; 763 | align-items: center; 764 | gap: 10px; 765 | } 766 | 767 | .gears-card .btn { padding: 18px 20px; } 768 | 769 | .gears-card .btn-primary { 770 | font-size: var(--fs-7); 771 | padding-block: 15px; 772 | } 773 | 774 | .gears-card .btn-primary ion-icon { 775 | font-size: 20px; 776 | --ionicon-stroke-width: 80px; 777 | } 778 | 779 | .gears-card .card-btn { 780 | --polygon-1: polygon(75% 0, 100% 25%, 100% 100%, 25% 100%, 0 75%, 0 0); 781 | 782 | background: var(--raisin-black-1); 783 | color: var(--orange); 784 | } 785 | 786 | .gears-card .card-btn ion-icon { --ionicon-stroke-width: 50px; } 787 | 788 | .gears-card .card-btn:is(:hover, :focus) { 789 | background: var(--orange); 790 | color: var(--white); 791 | } 792 | 793 | 794 | 795 | 796 | 797 | /*-----------------------------------*\ 798 | #NEWSLETTER 799 | \*-----------------------------------*/ 800 | 801 | .newsletter { padding: var(--section-padding) 0 120px; } 802 | 803 | .newsletter-card { 804 | background: url("../images/newsletter-bg.jpg") no-repeat; 805 | background-size: cover; 806 | background-position: center; 807 | padding: 50px 25px; 808 | border-radius: 12px; 809 | text-align: center; 810 | } 811 | 812 | .newsletter-content { margin-bottom: 30px; } 813 | 814 | .newsletter-img { 815 | width: max-content; 816 | margin-inline: auto; 817 | margin-bottom: 10px; 818 | } 819 | 820 | .newsletter-title { font-size: var(--fs-3); } 821 | 822 | .newsletter .input-field { 823 | background: hsla(0, 0%, 0%, 0.2); 824 | color: var(--white); 825 | border: 1px solid var(--white); 826 | font-size: var(--fs-10); 827 | padding: 17px 25px; 828 | margin-bottom: 15px; 829 | } 830 | 831 | .newsletter .input-field:focus { 832 | background: hsla(0, 0%, 0%, 0.4); 833 | outline: none; 834 | } 835 | 836 | .newsletter .input-field::placeholder { 837 | color: inherit; 838 | font-size: var(--fs-9); 839 | } 840 | 841 | .newsletter .btn-secondary { 842 | font-size: var(--fs-7); 843 | margin-inline: auto; 844 | } 845 | 846 | 847 | 848 | 849 | 850 | /*-----------------------------------*\ 851 | #FOOTER 852 | \*-----------------------------------*/ 853 | 854 | .footer-top { 855 | background: url("../images/footer-bg.jpg") no-repeat; 856 | background-size: cover; 857 | background-position: center; 858 | padding: var(--section-padding) 0; 859 | } 860 | 861 | .footer-brand-wrapper { 862 | position: relative; 863 | padding-bottom: 30px; 864 | border-bottom: 1px solid hsl(220, 14%, 8%); 865 | margin-bottom: 50px; 866 | } 867 | 868 | .footer-brand-wrapper::after { 869 | content: ""; 870 | position: absolute; 871 | bottom: -4px; 872 | left: 0; 873 | width: 100%; 874 | height: 1px; 875 | background: hsla(0, 0%, 50%, 0.2); 876 | } 877 | 878 | .footer-top .logo { 879 | width: max-content; 880 | margin-inline: auto; 881 | margin-bottom: 50px; 882 | } 883 | 884 | .footer-menu-list { 885 | display: flex; 886 | flex-wrap: wrap; 887 | justify-content: center; 888 | align-items: center; 889 | gap: 5px 40px; 890 | margin-bottom: 20px; 891 | } 892 | 893 | .footer-menu-link { 894 | color: var(--platinum); 895 | font-family: var(--ff-oswald); 896 | font-size: var(--fs-8); 897 | font-weight: var(--fw-500); 898 | letter-spacing: 1px; 899 | text-transform: uppercase; 900 | padding: 5px 10px; 901 | transition: var(--transition-1); 902 | } 903 | 904 | .footer-menu-link:is(:hover, :focus) { color: var(--orange); } 905 | 906 | .footer-input-wrapper { 907 | position: relative; 908 | max-width: 260px; 909 | margin-inline: auto; 910 | } 911 | 912 | .footer-input { 913 | --polygon-1: polygon(93% 0, 100% 30%, 100% 100%, 7% 100%, 0 63%, 0 0); 914 | 915 | background: var(--xiketic); 916 | color: var(--white); 917 | font-size: var(--fs-10); 918 | padding: 17px 25px; 919 | clip-path: var(--polygon-1); 920 | } 921 | 922 | .footer-input:focus { outline: none; } 923 | 924 | .footer-input::placeholder { font-size: var(--fs-9); } 925 | 926 | .footer-input-wrapper .btn-primary { 927 | --polygon-1: polygon(70% 0, 100% 30%, 100% 100%, 30% 100%, 0 63%, 0 0); 928 | 929 | position: absolute; 930 | top: 0; 931 | right: 0; 932 | padding: 17px; 933 | } 934 | 935 | .footer-input-wrapper .btn-primary:is(:hover, :focus) { 936 | background: var(--white); 937 | color: var(--orange); 938 | } 939 | 940 | .quicklink-list { 941 | display: flex; 942 | flex-wrap: wrap; 943 | justify-content: center; 944 | align-items: center; 945 | gap: 5px; 946 | margin-bottom: 20px; 947 | } 948 | 949 | .quicklink-item { 950 | color: var(--light-gray); 951 | font-family: var(--ff-oswald); 952 | font-size: var(--fs-11); 953 | font-weight: var(--fw-500); 954 | text-transform: uppercase; 955 | letter-spacing: 1px; 956 | padding: 5px 10px; 957 | transition: var(--transition-1); 958 | } 959 | 960 | .quicklink-item:is(:hover, :focus) { color: var(--orange); } 961 | 962 | .footer-social-list { 963 | display: flex; 964 | justify-content: center; 965 | align-items: center; 966 | gap: 10px; 967 | } 968 | 969 | .footer-social-link { 970 | background: var(--xiketic); 971 | color: var(--light-gray); 972 | width: 35px; 973 | height: 35px; 974 | display: grid; 975 | place-items: center; 976 | font-size: 14px; 977 | border-radius: 50%; 978 | transition: var(--transition-1); 979 | } 980 | 981 | .footer-social-link:is(:hover, :focus) { color: var(--orange); } 982 | 983 | .footer-bottom { 984 | padding: 25px 0; 985 | background: var(--xiketic); 986 | text-align: center; 987 | } 988 | 989 | .copyright { 990 | color: var(--light-gray); 991 | font-family: var(--ff-oswald); 992 | font-size: var(--fs-9); 993 | font-weight: var(--fw-500); 994 | text-transform: uppercase; 995 | margin-bottom: 15px; 996 | } 997 | 998 | .copyright a { 999 | display: inline-block; 1000 | color: var(--orange); 1001 | } 1002 | 1003 | .footer-bottom-img img { 1004 | width: max-content; 1005 | max-width: 100%; 1006 | margin-inline: auto; 1007 | } 1008 | 1009 | 1010 | 1011 | 1012 | 1013 | /*-----------------------------------*\ 1014 | #GO TO TOP 1015 | \*-----------------------------------*/ 1016 | 1017 | .go-top { 1018 | --polygon-1: polygon(70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%, 0 0); 1019 | 1020 | position: fixed; 1021 | bottom: 20px; 1022 | right: 20px; 1023 | padding: 15px; 1024 | visibility: hidden; 1025 | opacity: 0; 1026 | pointer-events: none; 1027 | transition: var(--transition-1); 1028 | } 1029 | 1030 | .go-top.active { 1031 | visibility: visible; 1032 | opacity: 1; 1033 | pointer-events: all; 1034 | } 1035 | 1036 | .go-top:is(:hover, :focus) { 1037 | background: var(--white); 1038 | color: var(--orange); 1039 | } 1040 | 1041 | 1042 | 1043 | 1044 | 1045 | /*-----------------------------------*\ 1046 | #RESPONSIVE 1047 | \*-----------------------------------*/ 1048 | 1049 | /** 1050 | * responsive larger than 420px 1051 | */ 1052 | 1053 | @media (min-width: 420px) { 1054 | 1055 | /** 1056 | * CUSTOM PROPERTY 1057 | */ 1058 | 1059 | :root { 1060 | 1061 | /** 1062 | * typography 1063 | */ 1064 | 1065 | --fs-1: 70px; 1066 | 1067 | } 1068 | 1069 | } 1070 | 1071 | 1072 | 1073 | 1074 | 1075 | /** 1076 | * responsive larger than 575px 1077 | */ 1078 | 1079 | @media (min-width: 575px) { 1080 | 1081 | /** 1082 | * CUSTOM PROPERTY 1083 | */ 1084 | 1085 | :root { 1086 | 1087 | /** 1088 | * typography 1089 | */ 1090 | 1091 | --fs-1: 90px; 1092 | --fs-2: 45px; 1093 | 1094 | } 1095 | 1096 | 1097 | 1098 | /** 1099 | * REUSED STYLE 1100 | */ 1101 | 1102 | .container { 1103 | max-width: 540px; 1104 | margin-inline: auto; 1105 | } 1106 | 1107 | 1108 | 1109 | /** 1110 | * ABOUT 1111 | */ 1112 | 1113 | .about-banner { 1114 | position: relative; 1115 | max-width: 410px; 1116 | margin-inline: auto; 1117 | z-index: 1; 1118 | } 1119 | 1120 | .character-2 { 1121 | display: block; 1122 | position: absolute; 1123 | top: 120px; 1124 | left: 160px; 1125 | max-width: 150px; 1126 | z-index: -1; 1127 | } 1128 | 1129 | .about-content { padding: 60px 40px; } 1130 | 1131 | 1132 | 1133 | /** 1134 | * TOURNAMENT 1135 | */ 1136 | 1137 | .tournament-text { 1138 | max-width: 500px; 1139 | margin-inline: auto; 1140 | } 1141 | 1142 | 1143 | 1144 | /** 1145 | * GALLERY 1146 | */ 1147 | 1148 | .gallery .container { max-width: unset; } 1149 | 1150 | .gallery-list li { min-width: 80%; } 1151 | 1152 | } 1153 | 1154 | 1155 | 1156 | 1157 | 1158 | /** 1159 | * responsive larger than 768px 1160 | */ 1161 | 1162 | @media (min-width: 768px) { 1163 | 1164 | /** 1165 | * CUSTOM PROPERTY 1166 | */ 1167 | 1168 | :root { 1169 | 1170 | /** 1171 | * typography 1172 | */ 1173 | 1174 | --fs-1: 115px; 1175 | --fs-3: 36px; 1176 | 1177 | } 1178 | 1179 | 1180 | 1181 | /** 1182 | * REUSED STYLE 1183 | */ 1184 | 1185 | .container { max-width: 700px; } 1186 | 1187 | .has-scrollbar::-webkit-scrollbar-button { width: 150px; } 1188 | 1189 | 1190 | 1191 | /** 1192 | * HEADER 1193 | */ 1194 | 1195 | .header::after, 1196 | .header::before { 1197 | content: ""; 1198 | position: absolute; 1199 | width: 115px; 1200 | height: 20px; 1201 | background: var(--raisin-black-1); 1202 | bottom: -17px; 1203 | } 1204 | 1205 | .header::before { 1206 | left: 0; 1207 | clip-path: var(--polygon-2); 1208 | } 1209 | 1210 | .header::after { 1211 | right: 0; 1212 | clip-path: var(--polygon-3); 1213 | } 1214 | 1215 | 1216 | 1217 | /** 1218 | * HERO 1219 | */ 1220 | 1221 | .hero-subtitle { 1222 | --fs-7: 25px; 1223 | letter-spacing: 30px; 1224 | } 1225 | 1226 | 1227 | 1228 | /** 1229 | * ABOUT 1230 | */ 1231 | 1232 | .about-banner { max-width: 430px; } 1233 | 1234 | .character { 1235 | display: block; 1236 | position: absolute; 1237 | z-index: -1; 1238 | } 1239 | 1240 | .character-1 { 1241 | width: 130px; 1242 | top: 110px; 1243 | left: -120px; 1244 | } 1245 | 1246 | .character-2 { left: 200px; } 1247 | 1248 | .character-3 { 1249 | top: 0; 1250 | right: -112px; 1251 | } 1252 | 1253 | 1254 | 1255 | /** 1256 | * GALLERY 1257 | */ 1258 | 1259 | .gallery-list { padding-bottom: 30px; } 1260 | 1261 | .gallery-list li { min-width: 70%; } 1262 | 1263 | 1264 | 1265 | /** 1266 | * GEARS 1267 | */ 1268 | 1269 | .gears-list { grid-template-columns: 1fr 1fr; } 1270 | 1271 | 1272 | 1273 | /** 1274 | * NEWSLETTER 1275 | */ 1276 | 1277 | .newsletter-card { text-align: left; } 1278 | 1279 | .newsletter-content { 1280 | display: flex; 1281 | justify-content: center; 1282 | align-items: center; 1283 | gap: 30px; 1284 | max-width: 440px; 1285 | margin-inline: auto; 1286 | } 1287 | 1288 | .newsletter-img { margin-inline: 0; } 1289 | 1290 | .newsletter-form { 1291 | position: relative; 1292 | max-width: 530px; 1293 | margin-inline: auto; 1294 | } 1295 | 1296 | .newsletter-form::after { 1297 | content: ""; 1298 | position: absolute; 1299 | bottom: 9px; 1300 | left: -3px; 1301 | width: 27px; 1302 | height: 1px; 1303 | background: var(--white); 1304 | transform: rotate(43deg); 1305 | } 1306 | 1307 | .newsletter .btn-secondary { 1308 | position: absolute; 1309 | top: 0; 1310 | right: 0; 1311 | bottom: 0; 1312 | } 1313 | 1314 | .newsletter .input-field { 1315 | clip-path: var(--polygon-4); 1316 | margin-bottom: 0; 1317 | } 1318 | 1319 | 1320 | 1321 | /** 1322 | * FOOTER 1323 | */ 1324 | 1325 | .footer-menu-wrapper, 1326 | .footer-quicklinks, 1327 | .footer-bottom .container { 1328 | display: flex; 1329 | justify-content: space-between; 1330 | align-items: center; 1331 | } 1332 | 1333 | .footer-menu-list { 1334 | max-width: 50%; 1335 | justify-content: flex-start; 1336 | column-gap: 16px; 1337 | margin-bottom: 0; 1338 | } 1339 | 1340 | .footer-input-wrapper { 1341 | margin-inline: 0; 1342 | width: 50%; 1343 | } 1344 | 1345 | .quicklink-list { 1346 | margin-bottom: 0; 1347 | column-gap: 15px; 1348 | } 1349 | 1350 | .copyright { margin-bottom: 0; } 1351 | 1352 | } 1353 | 1354 | 1355 | 1356 | 1357 | 1358 | /** 1359 | * responsive larger than 1024px 1360 | */ 1361 | 1362 | @media (min-width: 1024px) { 1363 | 1364 | /** 1365 | * CUSTOM PROPERTY 1366 | */ 1367 | 1368 | :root { 1369 | 1370 | /** 1371 | * spacing 1372 | */ 1373 | 1374 | --section-padding: 100px; 1375 | 1376 | } 1377 | 1378 | 1379 | 1380 | /** 1381 | * REUSED STYLE 1382 | */ 1383 | 1384 | .container { max-width: 1000px; } 1385 | 1386 | .has-scrollbar::-webkit-scrollbar-button { width: 200px; } 1387 | 1388 | 1389 | 1390 | /** 1391 | * HEADER 1392 | */ 1393 | 1394 | .header { padding-block: 0; } 1395 | 1396 | .header .logo { margin-right: 25px; } 1397 | 1398 | .nav-open-btn { display: none; } 1399 | 1400 | .navbar { 1401 | position: static; 1402 | opacity: 1; 1403 | visibility: visible; 1404 | background: none; 1405 | max-width: unset; 1406 | width: max-content; 1407 | height: auto; 1408 | box-shadow: none; 1409 | } 1410 | 1411 | .navbar-top, 1412 | .nav-social-list { display: none; } 1413 | 1414 | .navbar-list { 1415 | margin-bottom: 0; 1416 | display: flex; 1417 | justify-content: flex-end; 1418 | align-items: center; 1419 | } 1420 | 1421 | .navbar-link { 1422 | position: relative; 1423 | color: var(--platinum); 1424 | padding-block: 34px; 1425 | border: none; 1426 | font-family: var(--ff-oswald); 1427 | text-transform: uppercase; 1428 | letter-spacing: 1px; 1429 | z-index: 1; 1430 | } 1431 | 1432 | .navbar-link::after { 1433 | content: ""; 1434 | position: absolute; 1435 | inset: 0; 1436 | transform: skew(-15deg); 1437 | border-bottom: 5px solid transparent; 1438 | z-index: -1; 1439 | transition: var(--transition-1); 1440 | } 1441 | 1442 | .navbar-link:focus { outline: none; } 1443 | 1444 | .navbar-link:is(:hover, :focus)::after { 1445 | background: var(--raisin-black-2); 1446 | border-color: var(--orange); 1447 | } 1448 | 1449 | .header-actions { 1450 | display: flex; 1451 | justify-content: center; 1452 | align-items: center; 1453 | } 1454 | 1455 | .header-actions .search { 1456 | color: var(--white); 1457 | font-size: 18px; 1458 | padding: 25px; 1459 | transition: var(--transition-1); 1460 | } 1461 | 1462 | .search ion-icon { --ionicon-stroke-width: 70px; } 1463 | 1464 | .header-actions .search:is(:hover, :focus) { color: var(--orange); } 1465 | 1466 | .btn-sign_in { 1467 | position: relative; 1468 | display: flex; 1469 | justify-content: center; 1470 | align-items: center; 1471 | background: var(--raisin-black-3); 1472 | color: var(--light-gray); 1473 | font-family: var(--ff-oswald); 1474 | font-size: var(--fs-11); 1475 | font-weight: var(--fw-500); 1476 | text-transform: uppercase; 1477 | letter-spacing: 1px; 1478 | padding: 5px; 1479 | border-right: 5px solid var(--orange); 1480 | box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.2); 1481 | margin-left: 15px; 1482 | transition: var(--transition-1); 1483 | } 1484 | 1485 | .btn-sign_in::after { 1486 | content: ""; 1487 | position: absolute; 1488 | top: 50%; 1489 | left: -20px; 1490 | transform: translateY(-50%); 1491 | width: 5px; 1492 | height: 40px; 1493 | background: var(--eerie-black); 1494 | box-shadow: 0 3px 7px hsla(345, 75%, 30%, 0.2), 1495 | inset 0 3px 7px 0 hsla(335, 53%, 14%, 0.4); 1496 | } 1497 | 1498 | .btn-sign_in:is(:hover, :focus) { color: var(--orange); } 1499 | 1500 | .btn-sign_in .icon-box { 1501 | font-size: 18px; 1502 | background: var(--raisin-black-2); 1503 | padding: 6px; 1504 | margin-right: 5px; 1505 | box-shadow: 0 3px 7px hsla(345, 75%, 30%, 0.2), 1506 | inset 0 3px 7px 0 hsla(335, 53%, 14%, 0.4); 1507 | } 1508 | 1509 | .btn-sign_in .icon-box ion-icon { --ionicon-stroke-width: 40px; } 1510 | 1511 | .btn-sign_in span { padding-inline: 10px; } 1512 | 1513 | .overlay { display: none; } 1514 | 1515 | 1516 | 1517 | /** 1518 | * ABOUT 1519 | */ 1520 | 1521 | .about { padding-top: 200px; } 1522 | 1523 | .about-content { 1524 | max-width: 700px; 1525 | margin-inline: auto; 1526 | } 1527 | 1528 | 1529 | 1530 | /** 1531 | * TOURNAMENT 1532 | */ 1533 | 1534 | .tournament { 1535 | --fs-2: 30px; 1536 | --fs-3: 30px; 1537 | --fs-6: 16px; 1538 | 1539 | text-align: left; 1540 | } 1541 | 1542 | .tournament .container { 1543 | display: flex; 1544 | justify-content: space-between; 1545 | align-items: center; 1546 | } 1547 | 1548 | .tournament-content, 1549 | .tournament-prize { margin-bottom: 0; } 1550 | 1551 | .tournament-content { max-width: 310px; } 1552 | 1553 | .tournament .btn-primary { margin-inline: 0; } 1554 | 1555 | .tournament-prize, 1556 | .tournament-winners { text-align: center; } 1557 | 1558 | .tournament-winners { padding: 45px 40px; } 1559 | 1560 | 1561 | 1562 | /** 1563 | * GALLERY 1564 | */ 1565 | 1566 | .gallery-list { 1567 | gap: 30px; 1568 | padding-inline: 40px; 1569 | } 1570 | 1571 | .gallery-list li { min-width: 50%; } 1572 | 1573 | 1574 | 1575 | /** 1576 | * GEARS 1577 | */ 1578 | 1579 | .card-time-wrapper { 1580 | top: 4%; 1581 | right: 8%; 1582 | } 1583 | 1584 | 1585 | 1586 | /** 1587 | * NEWSLETTER 1588 | */ 1589 | 1590 | .newsletter { padding-bottom: 200px; } 1591 | 1592 | .newsletter-card { 1593 | display: flex; 1594 | justify-content: space-between; 1595 | align-items: center; 1596 | gap: 50px; 1597 | padding: 45px 50px; 1598 | } 1599 | 1600 | .newsletter-content { 1601 | margin-inline: 0; 1602 | margin-bottom: 0; 1603 | } 1604 | 1605 | .newsletter-img { padding-left: 30px; } 1606 | 1607 | .newsletter-form { flex-grow: 1; } 1608 | 1609 | .newsletter-form::after { 1610 | bottom: 9px; 1611 | left: -5px; 1612 | width: 25px; 1613 | transform: rotate(52deg); 1614 | } 1615 | 1616 | 1617 | 1618 | /** 1619 | * FOOTER 1620 | */ 1621 | 1622 | .footer-brand-wrapper { 1623 | display: flex; 1624 | justify-content: space-between; 1625 | align-items: center; 1626 | } 1627 | 1628 | .footer-top .logo { 1629 | margin-inline: 0; 1630 | margin-bottom: 0; 1631 | margin-right: 50px; 1632 | } 1633 | 1634 | .footer-menu-wrapper { gap: 50px; } 1635 | 1636 | .footer-menu-list { 1637 | flex-grow: 1; 1638 | max-width: unset; 1639 | } 1640 | 1641 | } 1642 | 1643 | 1644 | 1645 | 1646 | 1647 | /** 1648 | * responsive larger than 1200px 1649 | */ 1650 | 1651 | @media (min-width: 1200px) { 1652 | 1653 | /** 1654 | * CUSTOM PROPERTY 1655 | */ 1656 | 1657 | :root { 1658 | 1659 | /** 1660 | * typography 1661 | */ 1662 | 1663 | --fs-1: 150px; 1664 | 1665 | } 1666 | 1667 | 1668 | 1669 | /** 1670 | * REUSED STYLE 1671 | */ 1672 | 1673 | .container { max-width: 1200px; } 1674 | 1675 | 1676 | 1677 | /** 1678 | * HEADER 1679 | */ 1680 | 1681 | .navbar-link { padding-block: 45px; } 1682 | 1683 | 1684 | 1685 | /** 1686 | * HERO 1687 | */ 1688 | 1689 | .hero { margin-top: 110px; } 1690 | 1691 | 1692 | 1693 | /** 1694 | * ABOUT 1695 | */ 1696 | 1697 | .about { 1698 | background-size: 55%; 1699 | background-position: 90% center; 1700 | } 1701 | 1702 | .about .container { 1703 | display: flex; 1704 | flex-direction: row-reverse; 1705 | justify-content: space-between; 1706 | align-items: center; 1707 | gap: 100px; 1708 | padding-right: 110px; 1709 | } 1710 | 1711 | .about-banner { 1712 | margin-inline: 0; 1713 | margin-bottom: 0; 1714 | } 1715 | 1716 | .character-2 { 1717 | left: 155px; 1718 | top: 70px; 1719 | } 1720 | 1721 | .about-content { 1722 | max-width: 600px; 1723 | margin-inline: 0; 1724 | } 1725 | 1726 | 1727 | 1728 | /** 1729 | * TEAM 1730 | */ 1731 | 1732 | .team-list { gap: 20px; } 1733 | 1734 | 1735 | 1736 | /** 1737 | * GEARS 1738 | */ 1739 | 1740 | .gears-list { grid-template-columns: repeat(3, 1fr); } 1741 | 1742 | .card-time-wrapper { 1743 | top: 3.5%; 1744 | right: 7%; 1745 | } 1746 | 1747 | 1748 | 1749 | /** 1750 | * NEWSLETTER 1751 | */ 1752 | 1753 | .newsletter-card { padding-block: 60px; } 1754 | 1755 | .newsletter-content { max-width: 500px; } 1756 | 1757 | .newsletter-title { --fs-3: 40px; } 1758 | 1759 | .newsletter-form { 1760 | max-width: 450px; 1761 | margin-inline: 0; 1762 | } 1763 | 1764 | .newsletter-form::after { 1765 | left: -3px; 1766 | transform: rotate(46deg); 1767 | } 1768 | 1769 | 1770 | 1771 | /** 1772 | * FOOTER 1773 | */ 1774 | 1775 | .footer-menu-wrapper { flex-grow: 1; } 1776 | 1777 | .footer-menu-list { justify-content: flex-end; } 1778 | 1779 | } -------------------------------------------------------------------------------- /assets/fonts/REFAULT.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/fonts/REFAULT.ttf -------------------------------------------------------------------------------- /assets/fonts/REFAULT.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/fonts/REFAULT.woff -------------------------------------------------------------------------------- /assets/fonts/REFAULT.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/fonts/REFAULT.woff2 -------------------------------------------------------------------------------- /assets/images/about-img-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/about-img-shadow.png -------------------------------------------------------------------------------- /assets/images/about-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/about-img.png -------------------------------------------------------------------------------- /assets/images/character-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/character-1.png -------------------------------------------------------------------------------- /assets/images/character-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/character-2.png -------------------------------------------------------------------------------- /assets/images/character-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/character-3.png -------------------------------------------------------------------------------- /assets/images/footer-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/footer-bg.jpg -------------------------------------------------------------------------------- /assets/images/footer-bottom-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/footer-bottom-img.png -------------------------------------------------------------------------------- /assets/images/gallery-img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gallery-img-1.jpg -------------------------------------------------------------------------------- /assets/images/gallery-img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gallery-img-2.jpg -------------------------------------------------------------------------------- /assets/images/gallery-img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gallery-img-3.jpg -------------------------------------------------------------------------------- /assets/images/gallery-img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gallery-img-4.jpg -------------------------------------------------------------------------------- /assets/images/gamex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gamex.png -------------------------------------------------------------------------------- /assets/images/gamex.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/gears-card-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gears-card-bg.png -------------------------------------------------------------------------------- /assets/images/gears-img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gears-img-1.png -------------------------------------------------------------------------------- /assets/images/gears-img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gears-img-2.png -------------------------------------------------------------------------------- /assets/images/gears-img-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/gears-img-3.png -------------------------------------------------------------------------------- /assets/images/hero-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/hero-banner.jpg -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/newsletter-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/newsletter-bg.jpg -------------------------------------------------------------------------------- /assets/images/newsletter-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/newsletter-img.png -------------------------------------------------------------------------------- /assets/images/prize-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/prize-img.png -------------------------------------------------------------------------------- /assets/images/section-wrapper-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/section-wrapper-bg.jpg -------------------------------------------------------------------------------- /assets/images/section_line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/section_line.png -------------------------------------------------------------------------------- /assets/images/team-member-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-1.png -------------------------------------------------------------------------------- /assets/images/team-member-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-10.png -------------------------------------------------------------------------------- /assets/images/team-member-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-11.png -------------------------------------------------------------------------------- /assets/images/team-member-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-12.png -------------------------------------------------------------------------------- /assets/images/team-member-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-13.png -------------------------------------------------------------------------------- /assets/images/team-member-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-14.png -------------------------------------------------------------------------------- /assets/images/team-member-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-2.png -------------------------------------------------------------------------------- /assets/images/team-member-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-3.png -------------------------------------------------------------------------------- /assets/images/team-member-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-4.png -------------------------------------------------------------------------------- /assets/images/team-member-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-5.png -------------------------------------------------------------------------------- /assets/images/team-member-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-6.png -------------------------------------------------------------------------------- /assets/images/team-member-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-7.png -------------------------------------------------------------------------------- /assets/images/team-member-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-8.png -------------------------------------------------------------------------------- /assets/images/team-member-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/team-member-9.png -------------------------------------------------------------------------------- /assets/images/winner-img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/winner-img-1.png -------------------------------------------------------------------------------- /assets/images/winner-img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/assets/images/winner-img-2.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * element toggle function 5 | */ 6 | 7 | const elemToggleFunc = function (elem) { elem.classList.toggle("active"); } 8 | 9 | 10 | 11 | /** 12 | * navbar variables 13 | */ 14 | 15 | const navbar = document.querySelector("[data-nav]"); 16 | const navOpenBtn = document.querySelector("[data-nav-open-btn]"); 17 | const navCloseBtn = document.querySelector("[data-nav-close-btn]"); 18 | const overlay = document.querySelector("[data-overlay]"); 19 | 20 | const navElemArr = [navOpenBtn, navCloseBtn, overlay]; 21 | 22 | for (let i = 0; i < navElemArr.length; i++) { 23 | 24 | navElemArr[i].addEventListener("click", function () { 25 | elemToggleFunc(navbar); 26 | elemToggleFunc(overlay); 27 | elemToggleFunc(document.body); 28 | }) 29 | 30 | } 31 | 32 | 33 | 34 | /** 35 | * go top 36 | */ 37 | 38 | const goTopBtn = document.querySelector("[data-go-top]"); 39 | 40 | window.addEventListener("scroll", function () { 41 | 42 | if (window.scrollY >= 800) { 43 | goTopBtn.classList.add("active"); 44 | } else { 45 | goTopBtn.classList.remove("active"); 46 | } 47 | 48 | }) -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GameX - Gaming website 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 35 | 36 |
37 | 38 | 41 |
42 | 43 |
44 | 45 | 48 | 49 | 52 | 53 | 124 | 125 |
126 | 127 | 130 | 131 | 140 | 141 |
142 | 143 |
144 | 145 |
146 | 147 | 148 | 149 | 150 | 151 |
152 |
153 | 154 | 157 | 158 |
159 |
160 | 161 |

The Season 1

162 | 163 |

Steam

164 | 165 |
166 | 167 | 172 | 173 | 174 | 175 |
176 | 177 |
178 |
179 | 180 | 181 | 182 | 183 | 184 |
185 | 186 | 189 | 190 |
191 |
192 | 193 |
194 | 195 | M shape 196 | 197 | Game character 198 | 199 | Game character 200 | 201 | Game character 202 | 203 |
204 | 205 |
206 | 207 |

Find team member

208 | 209 |

Experience just for gamers offer

210 | 211 |

212 | Welcome, gamers! Get ready to level up your experience at GameX, 213 | your one-stop shop for everything gaming. 214 |

215 | 216 |

217 | 218 | 219 | Will sharpen your brain and focus 220 |

221 | 222 |
223 | 224 |
225 |
226 | 227 | 228 | 229 | 230 | 231 | 234 | 235 |
236 |
237 | 238 |
239 | 240 |

Check out our next

241 | 242 |

Gaming tournaments !

243 | 244 |

245 | Stuck on a tricky level? Need a hand optimizing your gear? Our detailed guides will help you conquer any challenge. 246 |

247 | 248 | 249 | 250 |
251 | 252 |
253 | 254 |

Prize pool

255 | 256 | ₹50000 257 | 258 |
259 | Prize image 260 |
261 | 262 |
263 | 264 |
265 | 266 |

Last winners

267 | 268 |
    269 | 270 |
  • 271 |
    272 | 273 |
    274 | Winner image 275 |
    276 | 277 |

    1st place

    278 | 279 |
    280 |
    • 281 | 282 |
  • 283 |
    284 | 285 |
    286 | Winner image 287 |
    288 | 289 |

    2nd place

    290 | 291 |
    292 |
    • 293 | 294 |
295 | 296 |
297 | 298 |
299 |
300 | 301 | 302 | 303 | 304 | 305 | 308 | 309 |
310 |
311 | 312 |
    313 | 314 |
  • 315 |
    316 | Gallery image 317 |
    318 |
    • 319 | 320 |
  • 321 |
    322 | Gallery image 323 |
    324 |
    • 325 | 326 |
  • 327 |
    328 | Gallery image 329 |
    330 |
    • 331 | 332 |
  • 333 |
    334 | Gallery image 335 |
    336 |
    • 337 | 338 |
339 | 340 |
341 |
342 | 343 | 344 | 345 | 346 | 347 | 350 | 351 |
352 |
353 | 354 |

Active Team Members

355 | 356 | 469 | 470 | 471 | 472 |
473 |
474 | 475 | 476 | 477 | 478 | 479 | 482 | 483 |
484 |
485 | 486 |

check our gears

487 | 488 |
    489 | 490 |
  • 491 |
    492 | 493 |
    494 | 495 | 496 | Headphone 497 | 498 | 499 | 502 | 503 |
    504 | 505 | 506 | In 4 days 507 |
    508 | 509 |
    510 | 511 |
    512 | 513 |
    514 | 515 |

    Headphone

    516 | 517 |

    e-sports

    518 | 519 |
    520 | 521 |
    ₹999
    522 | 523 |
    524 | 525 |
    526 | 527 | 532 | 533 | 536 | 537 |
    538 | 539 |
    540 |
    • 541 | 542 |
  • 543 |
    544 | 545 |
    546 | 547 | 548 | Controller 549 | 550 | 551 | 554 | 555 |
    556 | 557 | 558 | In 4 days 559 |
    560 | 561 |
    562 | 563 |
    564 | 565 |
    566 | 567 |

    Controller

    568 | 569 |

    e-sports

    570 | 571 |
    572 | 573 |
    ₹1999
    574 | 575 |
    576 | 577 |
    578 | 579 | 584 | 585 | 588 | 589 |
    590 | 591 |
    592 |
    • 593 | 594 |
  • 595 |
    596 | 597 |
    598 | 599 | 600 | Gaming mask 601 | 602 | 603 | 606 | 607 |
    608 | 609 | 610 | In 4 days 611 |
    612 | 613 |
    614 | 615 |
    616 | 617 |
    618 | 619 |

    Gaming mask

    620 | 621 |

    e-sports

    622 | 623 |
    624 | 625 |
    ₹1500
    626 | 627 |
    628 | 629 |
    630 | 631 | 636 | 637 | 640 | 641 |
    642 | 643 |
    644 |
    • 645 | 646 |
647 | 648 |
649 |
650 | 651 | 652 | 653 | 654 | 655 | 658 | 659 | 682 | 683 |
684 | 685 |
686 |
687 | 688 | 689 | 690 | 691 | 692 | 695 | 696 | 817 | 818 | 819 | 820 | 821 | 822 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 837 | 838 | 839 | 842 | 843 | 844 | 845 | 846 | 847 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | GameX - Gaming website 2 | 3 | # HEADER 4 | 5 | alt = GameX logo 6 | 7 | 8 | 9 | alt = GameX logo 10 | 11 | 12 | 13 | Home 14 | About 15 | Tournament 16 | Team 17 | Gears 18 | Contact 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | Log-in 30 | 31 | 32 | 33 | # HERO 34 | 35 | The Season 1 36 | 37 | Steam 38 | 39 | Watch live 40 | 41 | 42 | 43 | Dream making 44 | 45 | 46 | 47 | # ABOUT 48 | 49 | alt = M shape 50 | alt = Game character 51 | 52 | Find team member 53 | 54 | Experience just for gamers offer 55 | 56 | Welcome, gamers! Get ready to level up your experience at GameX, your one-stop shop for everything gaming. 57 | 58 | 59 | 60 | Will sharpen your brain and focus 61 | 62 | 63 | 64 | # TOURNAMENT 65 | 66 | Check out our next 67 | 68 | Gaming tournaments ! 69 | 70 | Stuck on a tricky level? Need a hand optimizing your gear? Our detailed guides will help you conquer any challenge. 71 | 72 | Join with us 73 | 74 | Prize pool 75 | 76 | ₹50000 77 | 78 | alt = Prize image 79 | 80 | Last winners 81 | 82 | alt = Winner image 83 | 84 | 1st place 85 | 2nd place 86 | 87 | 88 | 89 | # GALLERY 90 | 91 | alt = Gallery image 92 | 93 | 94 | 95 | # TEAM 96 | 97 | Active Team Members 98 | 99 | 100 | 101 | alt = Team member image 102 | 103 | view all members 104 | 105 | 106 | 107 | # GEARS 108 | 109 | check our gears 110 | 111 | alt = shop card bg 112 | alt = Headphone 113 | 114 | 115 | 116 | 117 | In 4 days 118 | Headphone 119 | e-sports 120 | ₹999 121 | 122 | 123 | Add to cart 124 | 125 | 126 | alt = Controller 127 | Controller 128 | ₹1999 129 | 130 | alt = Gaming mask 131 | Gaming mask 132 | ₹1500 133 | 134 | 135 | 136 | # NEWSLETTER 137 | 138 | alt = Newsletter image 139 | 140 | Subscribe to our newsletter 141 | 142 | placeholder = Your Email Address 143 | 144 | Subscribe 145 | 146 | 147 | 148 | # FOOTER 149 | 150 | alt = GameX logo 151 | 152 | Home 153 | About 154 | Tournament 155 | Team 156 | Gears 157 | Contact 158 | 159 | placeholder = Find Here Now 160 | 161 | 162 | 163 | Faq 164 | Help center 165 | Terms of use 166 | Privacy 167 | 168 | 169 | 170 | 171 | 172 | 173 | Copyright © 2024 CREATIVITY OF AASHU 174 | 175 | alt = Online payment companies logo 176 | 177 | 178 | 179 | # GO TO TOP 180 | 181 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/readme-images/desktop.png -------------------------------------------------------------------------------- /readme-images/project-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/GameX/e8abaa61ecfb1d00b0a2147c25a876579648ac40/readme-images/project-logo.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 13 | ``` 14 | 15 | Ionicon 16 | 17 | ``` html 18 | 19 | 20 | ``` 21 | 22 | ## Colors 23 | 24 | ``` css 25 | --raisin-black-1: hsl(234, 14%, 14%); 26 | --raisin-black-2: hsl(231, 12%, 12%); 27 | --raisin-black-3: hsl(228, 12%, 17%); 28 | --eerie-black: hsl(240, 11%, 9%); 29 | --light-gray: hsl(0, 0%, 80%); 30 | --platinum: hsl(0, 4%, 91%); 31 | --xiketic: hsl(275, 24%, 10%); 32 | --orange: hsl(31, 100%, 51%); 33 | --white: hsl(0, 0%, 100%); 34 | --onyx: hsl(240, 5%, 26%); 35 | ``` 36 | 37 | ## Typography 38 | 39 | ### Font Family 40 | 41 | ``` css 42 | --ff-refault: "Refault", Georgia; 43 | --ff-oswald: 'Oswald', sans-serif; 44 | --ff-poppins: 'Poppins', sans-serif; 45 | ``` 46 | 47 | ### Font Size 48 | 49 | ``` css 50 | --fs-1: 54px; 51 | --fs-2: 34px; 52 | --fs-3: 30px; 53 | --fs-4: 26px; 54 | --fs-5: 22px; 55 | --fs-6: 20px; 56 | --fs-7: 18px; 57 | --fs-8: 15px; 58 | --fs-9: 14px; 59 | --fs-10: 13px; 60 | --fs-11: 12px; 61 | ``` 62 | 63 | ### Font Weight 64 | 65 | ``` css 66 | --fw-400: 400; 67 | --fw-500: 500; 68 | --fw-700: 700; 69 | ``` 70 | 71 | ## Transition 72 | 73 | ``` css 74 | --transition-1: 0.15s ease-in-out; 75 | --transition-2: 0.15s ease-in; 76 | --transition-3: 0.25s ease-out; 77 | ``` 78 | 79 | ## Spacing 80 | 81 | ``` css 82 | --section-padding: 60px; 83 | ``` 84 | 85 | ## Clip path 86 | 87 | ``` css 88 | --polygon-1: polygon(90% 0, 100% 34%, 100% 100%, 10% 100%, 0 66%, 0 0); 89 | --polygon-2: polygon(0 0, 100% 0%, 82% 100%, 0% 100%); 90 | --polygon-3: polygon(0 0, 100% 0%, 100% 100%, 18% 100%); 91 | --polygon-4: polygon(96% 0, 100% 36%, 100% 100%, 4% 100%, 0 66%, 0 0); 92 | ``` 93 | 94 | ## Custom font 95 | 96 | ``` css 97 | /* Webfont: Refault-Italic */ 98 | @font-face { 99 | font-family: 'Refault'; 100 | src: url('../fonts/REFAULT.eot'); /* IE9 Compat Modes */ 101 | src: url('../fonts/REFAULT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 102 | url('../fonts/REFAULT.woff') format('woff'), /* Modern Browsers */ 103 | url('../fonts/REFAULT.woff2') format('woff2'), /* Modern Browsers */ 104 | url('../fonts/REFAULT.ttf') format('truetype'); /* Safari, Android, iOS */ 105 | font-style: italic; 106 | font-weight: normal; 107 | text-rendering: optimizeLegibility; 108 | } 109 | ``` 110 | --------------------------------------------------------------------------------