├── README.md
├── assets
    ├── css
    │   └── style.css
    ├── images
    │   ├── blog-1.jpg
    │   ├── blog-2.jpg
    │   ├── blog-3.jpg
    │   ├── brand-1.png
    │   ├── brand-2.png
    │   ├── brand-3.png
    │   ├── brand-4.png
    │   ├── brand-5.png
    │   ├── brand-6.png
    │   ├── featured-game-1.jpg
    │   ├── featured-game-2.jpg
    │   ├── featured-game-3.jpg
    │   ├── featured-game-4.jpg
    │   ├── featured-game-icon.png
    │   ├── footer-bottom-img.png
    │   ├── header-top-bg.jpg
    │   ├── hero-banner.png
    │   ├── hero-bg.jpg
    │   ├── latest-game-1.jpg
    │   ├── latest-game-2.jpg
    │   ├── latest-game-3.jpg
    │   ├── live-match-banner.jpg
    │   ├── live-match-player-1.png
    │   ├── live-match-player-2.png
    │   ├── section-wrapper-bg.png
    │   ├── shop-bg.jpg
    │   ├── shop-img-1.jpg
    │   ├── shop-img-2.jpg
    │   ├── shop-img-3.jpg
    │   ├── shop-img-4.jpg
    │   └── title-underline.png
    └── js
    │   └── script.js
├── favicon.svg
├── index.html
├── index.txt
├── readme-images
    └── desktop.png
└── style-guide.md


/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/gamics)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/gamics?style=social)
 5 |   ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/gamics?style=social)
 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
 7 |   [![YouTube Video Views](https://img.shields.io/youtube/views/VJKx9uLEpaU?style=social)](https://youtu.be/VJKx9uLEpaU)
 8 | 
 9 |   <br />
10 |   <br />
11 | 
12 |   <h2 align="center">Gamics - Gaming website</h2>
13 | 
14 |   Gamics is a fully responsive gaming website, <br />Responsive for all devices, build using HTML, CSS, and JavaScript.
15 | 
16 |   <a href="https://codewithsadee.github.io/gamics/"><strong>➥ Live Demo</strong></a>
17 | 
18 | </div>
19 | 
20 | <br />
21 | 
22 | ### Demo Screeshots
23 | 
24 | ![Gamics Desktop Demo](./readme-images/desktop.png "Desktop Demo")
25 | 
26 | ### Prerequisites
27 | 
28 | Before you begin, ensure you have met the following requirements:
29 | 
30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
31 | 
32 | ### Run Locally
33 | 
34 | To run **Gamics** locally, run this command on your git bash:
35 | 
36 | Linux and macOS:
37 | 
38 | ```bash
39 | sudo git clone https://github.com/codewithsadee/gamics.git
40 | ```
41 | 
42 | Windows:
43 | 
44 | ```bash
45 | git clone https://github.com/codewithsadee/gamics.git
46 | ```
47 | 
48 | ### Contact
49 | 
50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
51 | 
52 | ### License
53 | 
54 | This project is **free to use** and does not contains any license.
55 | 


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


--------------------------------------------------------------------------------
/assets/images/blog-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/blog-1.jpg


--------------------------------------------------------------------------------
/assets/images/blog-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/blog-2.jpg


--------------------------------------------------------------------------------
/assets/images/blog-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/blog-3.jpg


--------------------------------------------------------------------------------
/assets/images/brand-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/brand-1.png


--------------------------------------------------------------------------------
/assets/images/brand-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/brand-2.png


--------------------------------------------------------------------------------
/assets/images/brand-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/brand-3.png


--------------------------------------------------------------------------------
/assets/images/brand-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/brand-4.png


--------------------------------------------------------------------------------
/assets/images/brand-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/brand-5.png


--------------------------------------------------------------------------------
/assets/images/brand-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/brand-6.png


--------------------------------------------------------------------------------
/assets/images/featured-game-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/featured-game-1.jpg


--------------------------------------------------------------------------------
/assets/images/featured-game-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/featured-game-2.jpg


--------------------------------------------------------------------------------
/assets/images/featured-game-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/featured-game-3.jpg


--------------------------------------------------------------------------------
/assets/images/featured-game-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/featured-game-4.jpg


--------------------------------------------------------------------------------
/assets/images/featured-game-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/featured-game-icon.png


--------------------------------------------------------------------------------
/assets/images/footer-bottom-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/footer-bottom-img.png


--------------------------------------------------------------------------------
/assets/images/header-top-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/header-top-bg.jpg


--------------------------------------------------------------------------------
/assets/images/hero-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/hero-banner.png


--------------------------------------------------------------------------------
/assets/images/hero-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/hero-bg.jpg


--------------------------------------------------------------------------------
/assets/images/latest-game-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/latest-game-1.jpg


--------------------------------------------------------------------------------
/assets/images/latest-game-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/latest-game-2.jpg


--------------------------------------------------------------------------------
/assets/images/latest-game-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/latest-game-3.jpg


--------------------------------------------------------------------------------
/assets/images/live-match-banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/live-match-banner.jpg


--------------------------------------------------------------------------------
/assets/images/live-match-player-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/live-match-player-1.png


--------------------------------------------------------------------------------
/assets/images/live-match-player-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/live-match-player-2.png


--------------------------------------------------------------------------------
/assets/images/section-wrapper-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/section-wrapper-bg.png


--------------------------------------------------------------------------------
/assets/images/shop-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/shop-bg.jpg


--------------------------------------------------------------------------------
/assets/images/shop-img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/shop-img-1.jpg


--------------------------------------------------------------------------------
/assets/images/shop-img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/shop-img-2.jpg


--------------------------------------------------------------------------------
/assets/images/shop-img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/shop-img-3.jpg


--------------------------------------------------------------------------------
/assets/images/shop-img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/shop-img-4.jpg


--------------------------------------------------------------------------------
/assets/images/title-underline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/assets/images/title-underline.png


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | 
 4 | 
 5 | const navbar = document.querySelector("[data-navbar]");
 6 | const navbarLinks = document.querySelectorAll("[data-nav-link]");
 7 | const navbarToggler = document.querySelector("[data-nav-toggler]");
 8 | 
 9 | navbarToggler.addEventListener("click", function () {
10 |   navbar.classList.toggle("active");
11 |   this.classList.toggle("active");
12 | });
13 | 
14 | for (let i = 0; i < navbarLinks.length; i++) {
15 |   navbarLinks[i].addEventListener("click", function () {
16 |     navbar.classList.remove("active");
17 |     navbarToggler.classList.remove("active");
18 |   });
19 | }
20 | 
21 | 
22 | 
23 | /**
24 |  * search toggle
25 |  */
26 | 
27 | const searchTogglers = document.querySelectorAll("[data-search-toggler]");
28 | const searchBox = document.querySelector("[data-search-box]");
29 | 
30 | for (let i = 0; i < searchTogglers.length; i++) {
31 |   searchTogglers[i].addEventListener("click", function () {
32 |     searchBox.classList.toggle("active");
33 |   });
34 | }
35 | 
36 | 
37 | 
38 | /**
39 |  * header
40 |  */
41 | 
42 | const header = document.querySelector("[data-header]");
43 | const backTopBtn = document.querySelector("[data-back-top-btn]");
44 | 
45 | window.addEventListener("scroll", function () {
46 |   if (window.scrollY >= 200) {
47 |     header.classList.add("active");
48 |     backTopBtn.classList.add("active");
49 |   } else {
50 |     header.classList.remove("active");
51 |     backTopBtn.classList.remove("active");
52 |   }
53 | });


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="50" height="50" rx="10" fill="#1D1E33"/>
3 | <path d="M44.8732 23.6232C43.0172 15.7243 40.2241 11.5084 36.0807 10.3568C35.2098 10.1163 34.3063 9.99613 33.3987 10.0001C32.199 10.0001 31.1542 10.2752 30.049 10.5668C28.7172 10.9186 27.2042 11.3181 24.9982 11.3181C22.7922 11.3181 21.2784 10.9194 19.9439 10.5677C18.8378 10.2752 17.7939 10.0001 16.5977 10.0001C15.6592 9.99703 14.7247 10.1168 13.8212 10.356C9.69969 11.5026 6.90828 15.7169 5.02517 23.6182C3.00031 32.1209 3.99699 37.4893 7.82008 38.7348C8.34414 38.9086 8.89553 38.9983 9.45118 39C12.0702 39 14.1703 36.9464 15.6054 35.2651C17.2269 33.3623 19.1249 32.3969 24.9982 32.3969C30.2441 32.3969 32.4151 33.0666 34.2904 35.2651C35.4691 36.6474 36.583 37.6145 37.6943 38.2232C39.1723 39.0321 40.6493 39.2117 42.0836 38.7479C44.3429 38.0222 45.638 36.1037 45.9338 33.0443C46.1587 30.6983 45.8121 27.6167 44.8732 23.6232ZM20.798 23.18H17.9978V25.816C17.9978 26.1655 17.8503 26.5008 17.5877 26.7479C17.3252 26.9951 16.969 27.134 16.5977 27.134C16.2264 27.134 15.8703 26.9951 15.6077 26.7479C15.3451 26.5008 15.1976 26.1655 15.1976 25.816V23.18H12.3975C12.0261 23.18 11.67 23.0411 11.4075 22.794C11.1449 22.5468 10.9974 22.2116 10.9974 21.862C10.9974 21.5125 11.1449 21.1772 11.4075 20.93C11.67 20.6829 12.0261 20.544 12.3975 20.544H15.1976V17.908C15.1976 17.5585 15.3451 17.2232 15.6077 16.9761C15.8703 16.7289 16.2264 16.59 16.5977 16.59C16.969 16.59 17.3252 16.7289 17.5877 16.9761C17.8503 17.2232 17.9978 17.5585 17.9978 17.908V20.544H20.798C21.1693 20.544 21.5254 20.6829 21.788 20.93C22.0505 21.1772 22.198 21.5125 22.198 21.862C22.198 22.2116 22.0505 22.5468 21.788 22.794C21.5254 23.0411 21.1693 23.18 20.798 23.18ZM28.1484 23.5095C27.8022 23.5095 27.4639 23.4129 27.1761 23.2318C26.8883 23.0508 26.664 22.7935 26.5315 22.4925C26.399 22.1914 26.3644 21.8602 26.4319 21.5406C26.4994 21.221 26.6661 20.9275 26.9109 20.6971C27.1556 20.4667 27.4675 20.3097 27.807 20.2462C28.1464 20.1826 28.4983 20.2152 28.8181 20.3399C29.1379 20.4646 29.4112 20.6758 29.6035 20.9467C29.7958 21.2176 29.8985 21.5362 29.8985 21.862C29.8985 22.2989 29.7141 22.718 29.3859 23.027C29.0577 23.3359 28.6125 23.5095 28.1484 23.5095V23.5095ZM31.9986 27.134C31.6523 27.134 31.3137 27.0372 31.0258 26.856C30.7379 26.6748 30.5136 26.4173 30.3813 26.116C30.249 25.8147 30.2146 25.4832 30.2825 25.1636C30.3503 24.8439 30.5175 24.5503 30.7626 24.3201C31.0078 24.0898 31.3201 23.9333 31.6599 23.8701C31.9996 23.807 32.3517 23.8403 32.6714 23.9656C32.9911 24.0909 33.2641 24.3027 33.4559 24.5742C33.6477 24.8457 33.7496 25.1646 33.7487 25.4906C33.7475 25.9268 33.5626 26.3448 33.2346 26.6529C32.9065 26.961 32.462 27.134 31.9986 27.134V27.134ZM31.9986 19.885C31.6525 19.885 31.3141 19.7884 31.0263 19.6074C30.7385 19.4263 30.5142 19.169 30.3817 18.868C30.2493 18.567 30.2146 18.2357 30.2821 17.9161C30.3497 17.5965 30.5163 17.303 30.7611 17.0726C31.0058 16.8422 31.3177 16.6853 31.6572 16.6217C31.9967 16.5581 32.3485 16.5908 32.6683 16.7155C32.9881 16.8401 33.2615 17.0513 33.4538 17.3222C33.6461 17.5932 33.7487 17.9117 33.7487 18.2375C33.7487 18.6745 33.5643 19.0935 33.2361 19.4025C32.9079 19.7114 32.4628 19.885 31.9986 19.885ZM35.8488 23.5095C35.5027 23.5095 35.1643 23.4129 34.8765 23.2318C34.5887 23.0508 34.3644 22.7935 34.2319 22.4925C34.0995 22.1914 34.0648 21.8602 34.1324 21.5406C34.1999 21.221 34.3666 20.9275 34.6113 20.6971C34.8561 20.4667 35.1679 20.3097 35.5074 20.2462C35.8469 20.1826 36.1988 20.2152 36.5186 20.3399C36.8383 20.4646 37.1117 20.6758 37.304 20.9467C37.4963 21.2176 37.5989 21.5362 37.5989 21.862C37.5989 22.2989 37.4145 22.718 37.0863 23.027C36.7581 23.3359 36.313 23.5095 35.8488 23.5095V23.5095Z" fill="#FFB800"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | 
   4 | <head>
   5 |   <meta charset="UTF-8">
   6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   8 |   <title>Gamics - Create Manage Matches</title>
   9 | 
  10 |   <!-- 
  11 |     - favicon
  12 |   -->
  13 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
  14 | 
  15 |   <!-- 
  16 |     - custom css link
  17 |   -->
  18 |   <link rel="stylesheet" href="./assets/css/style.css">
  19 | 
  20 |   <!-- 
  21 |     - google font link
  22 |   -->
  23 |   <link rel="preconnect" href="https://fonts.googleapis.com">
  24 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  25 |   <link
  26 |     href="https://fonts.googleapis.com/css2?family=Oxanium:wght@600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap"
  27 |     rel="stylesheet">
  28 | 
  29 |   <!-- 
  30 |     - preload images
  31 |   -->
  32 | </head>
  33 | 
  34 | <body id="top">
  35 | 
  36 |   <!-- 
  37 |     - #HEADER
  38 |   -->
  39 | 
  40 |   <header class="header">
  41 | 
  42 |     <div class="header-top">
  43 |       <div class="container">
  44 | 
  45 |         <div class="countdown-text">
  46 |           Exclusive Black Friday ! Offer <span class="span skewBg">10</span> Days
  47 |         </div>
  48 | 
  49 |         <div class="social-wrapper">
  50 | 
  51 |           <p class="social-title">Follow us on :</p>
  52 | 
  53 |           <ul class="social-list">
  54 | 
  55 |             <li>
  56 |               <a href="#" class="social-link">
  57 |                 <ion-icon name="logo-facebook"></ion-icon>
  58 |               </a>
  59 |             </li>
  60 | 
  61 |             <li>
  62 |               <a href="#" class="social-link">
  63 |                 <ion-icon name="logo-twitter"></ion-icon>
  64 |               </a>
  65 |             </li>
  66 | 
  67 |             <li>
  68 |               <a href="#" class="social-link">
  69 |                 <ion-icon name="logo-pinterest"></ion-icon>
  70 |               </a>
  71 |             </li>
  72 | 
  73 |             <li>
  74 |               <a href="#" class="social-link">
  75 |                 <ion-icon name="logo-linkedin"></ion-icon>
  76 |               </a>
  77 |             </li>
  78 | 
  79 |           </ul>
  80 | 
  81 |         </div>
  82 | 
  83 |       </div>
  84 |     </div>
  85 | 
  86 |     <div class="header-bottom skewBg" data-header>
  87 |       <div class="container">
  88 | 
  89 |         <a href="#" class="logo">Gamics</a>
  90 | 
  91 |         <nav class="navbar" data-navbar>
  92 |           <ul class="navbar-list">
  93 | 
  94 |             <li class="navbar-item">
  95 |               <a href="#home" class="navbar-link skewBg" data-nav-link>Home</a>
  96 |             </li>
  97 | 
  98 |             <li class="navbar-item">
  99 |               <a href="#live" class="navbar-link skewBg" data-nav-link>Live</a>
 100 |             </li>
 101 | 
 102 |             <li class="navbar-item">
 103 |               <a href="#features" class="navbar-link skewBg" data-nav-link>Features</a>
 104 |             </li>
 105 | 
 106 |             <li class="navbar-item">
 107 |               <a href="#shop" class="navbar-link skewBg" data-nav-link>Shop</a>
 108 |             </li>
 109 | 
 110 |             <li class="navbar-item">
 111 |               <a href="#blog" class="navbar-link skewBg" data-nav-link>Blog</a>
 112 |             </li>
 113 | 
 114 |             <li class="navbar-item">
 115 |               <a href="#" class="navbar-link skewBg" data-nav-link>Contact</a>
 116 |             </li>
 117 | 
 118 |           </ul>
 119 |         </nav>
 120 | 
 121 |         <div class="header-actions">
 122 | 
 123 |           <button class="cart-btn" aria-label="cart">
 124 |             <ion-icon name="cart"></ion-icon>
 125 | 
 126 |             <span class="cart-badge">0</span>
 127 |           </button>
 128 | 
 129 |           <button class="search-btn" aria-label="open search" data-search-toggler>
 130 |             <ion-icon name="search-outline"></ion-icon>
 131 |           </button>
 132 | 
 133 |           <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
 134 |             <ion-icon name="menu-outline" class="menu"></ion-icon>
 135 |             <ion-icon name="close-outline" class="close"></ion-icon>
 136 |           </button>
 137 | 
 138 |         </div>
 139 | 
 140 |       </div>
 141 |     </div>
 142 | 
 143 |   </header>
 144 | 
 145 | 
 146 | 
 147 | 
 148 | 
 149 |   <!-- 
 150 |     - #SEARCH BOX
 151 |   -->
 152 | 
 153 |   <div class="search-container" data-search-box>
 154 | 
 155 |     <div class="input-wrapper">
 156 |       <input type="search" name="search" aria-label="search" placeholder="Search here..." class="search-field">
 157 | 
 158 |       <button class="search-submit" aria-label="submit search" data-search-toggler>
 159 |         <ion-icon name="search-outline"></ion-icon>
 160 |       </button>
 161 | 
 162 |       <button class="search-close" aria-label="close search" data-search-toggler></button>
 163 |     </div>
 164 | 
 165 |   </div>
 166 | 
 167 | 
 168 | 
 169 | 
 170 | 
 171 |   <main>
 172 |     <article>
 173 | 
 174 |       <!-- 
 175 |         - #HERO
 176 |       -->
 177 | 
 178 |       <section class="section hero" id="home" aria-label="home"
 179 |         style="background-image: url('./assets/images/hero-bg.jpg')">
 180 |         <div class="container">
 181 | 
 182 |           <div class="hero-content">
 183 | 
 184 |             <p class="hero-subtitle">World Gaming</p>
 185 | 
 186 |             <h1 class="h1 hero-title">
 187 |               Create <span class="span">Manage</span> Matches
 188 |             </h1>
 189 | 
 190 |             <p class="hero-text">
 191 |               Find technology or people for digital projects in public sector and Find an individual specialist develope
 192 |               researcher.
 193 |             </p>
 194 | 
 195 |             <button class="btn skewBg">Read More</button>
 196 | 
 197 |           </div>
 198 | 
 199 |           <figure class="hero-banner img-holder" style="--width: 700; --height: 700;">
 200 |             <img src="./assets/images/hero-banner.png" width="700" height="700" alt="hero banner" class="w-100">
 201 |           </figure>
 202 | 
 203 |         </div>
 204 |       </section>
 205 | 
 206 | 
 207 | 
 208 | 
 209 | 
 210 |       <!-- 
 211 |         - #BRAND
 212 |       -->
 213 | 
 214 |       <section class="section brand" aria-label="brand">
 215 |         <div class="container">
 216 | 
 217 |           <ul class="has-scrollbar">
 218 | 
 219 |             <li class="brand-item">
 220 |               <img src="./assets/images/brand-1.png" width="90" height="90" loading="lazy" alt="brand logo">
 221 |             </li>
 222 | 
 223 |             <li class="brand-item">
 224 |               <img src="./assets/images/brand-2.png" width="90" height="90" loading="lazy" alt="brand logo">
 225 |             </li>
 226 | 
 227 |             <li class="brand-item">
 228 |               <img src="./assets/images/brand-3.png" width="90" height="90" loading="lazy" alt="brand logo">
 229 |             </li>
 230 | 
 231 |             <li class="brand-item">
 232 |               <img src="./assets/images/brand-4.png" width="90" height="90" loading="lazy" alt="brand logo">
 233 |             </li>
 234 | 
 235 |             <li class="brand-item">
 236 |               <img src="./assets/images/brand-5.png" width="90" height="90" loading="lazy" alt="brand logo">
 237 |             </li>
 238 | 
 239 |             <li class="brand-item">
 240 |               <img src="./assets/images/brand-6.png" width="90" height="90" loading="lazy" alt="brand logo">
 241 |             </li>
 242 | 
 243 |           </ul>
 244 | 
 245 |         </div>
 246 |       </section>
 247 | 
 248 | 
 249 | 
 250 | 
 251 | 
 252 |       <div class="section-wrapper">
 253 | 
 254 |         <!-- 
 255 |           - #LATEST GAME
 256 |         -->
 257 | 
 258 |         <section class="section latest-game" aria-label="latest game">
 259 |           <div class="container">
 260 | 
 261 |             <p class="section-subtitle">Latest Releases</p>
 262 | 
 263 |             <h2 class="h2 section-title">
 264 |               Create & <span class="span">Manage</span>
 265 |             </h2>
 266 | 
 267 |             <ul class="has-scrollbar">
 268 | 
 269 |               <li class="scrollbar-item">
 270 |                 <div class="latest-game-card">
 271 | 
 272 |                   <figure class="card-banner img-holder" style="--width: 400; --height: 470;">
 273 |                     <img src="./assets/images/latest-game-1.jpg" width="400" height="470" loading="lazy"
 274 |                       alt="White Walker Daily" class="img-cover">
 275 |                   </figure>
 276 | 
 277 |                   <div class="card-content">
 278 | 
 279 |                     <a href="#" class="card-badge skewBg">Zombie</a>
 280 | 
 281 |                     <h3 class="h3">
 282 |                       <a href="#" class="card-title">White Walker <span class="span">Daily</span></a>
 283 |                     </h3>
 284 | 
 285 |                     <p class="card-price">
 286 |                       Entry Fee : <span class="span">Free</span>
 287 |                     </p>
 288 | 
 289 |                   </div>
 290 | 
 291 |                 </div>
 292 |               </li>
 293 | 
 294 |               <li class="scrollbar-item">
 295 |                 <div class="latest-game-card">
 296 | 
 297 |                   <figure class="card-banner img-holder" style="--width: 400; --height: 470;">
 298 |                     <img src="./assets/images/latest-game-2.jpg" width="400" height="470" loading="lazy"
 299 |                       alt="Hunter Killer II" class="img-cover">
 300 |                   </figure>
 301 | 
 302 |                   <div class="card-content">
 303 | 
 304 |                     <a href="#" class="card-badge skewBg">Adventure</a>
 305 | 
 306 |                     <h3 class="h3">
 307 |                       <a href="#" class="card-title">Hunter Killer <span class="span">II</span></a>
 308 |                     </h3>
 309 | 
 310 |                     <p class="card-price">
 311 |                       Entry Fee : <span class="span">$25.00</span>
 312 |                     </p>
 313 | 
 314 |                   </div>
 315 | 
 316 |                 </div>
 317 |               </li>
 318 | 
 319 |               <li class="scrollbar-item">
 320 |                 <div class="latest-game-card">
 321 | 
 322 |                   <figure class="card-banner img-holder" style="--width: 400; --height: 470;">
 323 |                     <img src="./assets/images/latest-game-3.jpg" width="400" height="470" loading="lazy"
 324 |                       alt="Cyberpunk Daily" class="img-cover">
 325 |                   </figure>
 326 | 
 327 |                   <div class="card-content">
 328 | 
 329 |                     <a href="#" class="card-badge skewBg">Action</a>
 330 | 
 331 |                     <h3 class="h3">
 332 |                       <a href="#" class="card-title">Cyberpunk <span class="span">Daily</span></a>
 333 |                     </h3>
 334 | 
 335 |                     <p class="card-price">
 336 |                       Entry Fee : <span class="span">$25.00</span>
 337 |                     </p>
 338 | 
 339 |                   </div>
 340 | 
 341 |                 </div>
 342 |               </li>
 343 | 
 344 |             </ul>
 345 | 
 346 |           </div>
 347 |         </section>
 348 | 
 349 | 
 350 | 
 351 | 
 352 | 
 353 |         <!-- 
 354 |           - #LIVE MATCH
 355 |         -->
 356 | 
 357 |         <section class="section live-match" id="live" aria-label="live match">
 358 |           <div class="container">
 359 | 
 360 |             <h2 class="h2 section-title">
 361 |               Watch Live <span class="span">Match</span>
 362 |             </h2>
 363 | 
 364 |             <figure class="live-match-banner img-holder" style="--width: 800; --height: 470;">
 365 | 
 366 |               <img src="./assets/images/live-match-banner.jpg" width="800" height="470" loading="lazy"
 367 |                 alt="Live Match Video" class="img-cover">
 368 | 
 369 |               <button class="play-btn" aria-label="play video">
 370 |                 <ion-icon name="play"></ion-icon>
 371 |               </button>
 372 | 
 373 |             </figure>
 374 | 
 375 |             <div class="live-match-player">
 376 | 
 377 |               <figure class="player player-1 img-holder" style="--width: 406; --height: 277;">
 378 |                 <img src="./assets/images/live-match-player-1.png" width="406" height="277" loading="lazy"
 379 |                   alt="tokyo eagle" class="w-100">
 380 |               </figure>
 381 | 
 382 |               <div class="live-match-detail">
 383 | 
 384 |                 <p class="live-match-subtitle">Upcoming Live Matches</p>
 385 | 
 386 |                 <time class="live-match-time" datetime="08:30">08:30</time>
 387 | 
 388 |               </div>
 389 | 
 390 |               <figure class="player player-2 img-holder" style="--width: 400; --height: 305;">
 391 |                 <img src="./assets/images/live-match-player-2.png" width="400" height="305" loading="lazy"
 392 |                   alt="new york hunter7" class="w-100">
 393 |               </figure>
 394 | 
 395 |             </div>
 396 | 
 397 |           </div>
 398 |         </section>
 399 | 
 400 |       </div>
 401 | 
 402 | 
 403 | 
 404 | 
 405 | 
 406 |       <!-- 
 407 |         - #FEATURED GAME
 408 |       -->
 409 | 
 410 |       <section class="section featured-game" id="features" aria-label="featured game">
 411 |         <div class="container">
 412 | 
 413 |           <h2 class="h2 section-title">
 414 |             All Released <span class="span">Games</span>
 415 |           </h2>
 416 | 
 417 |           <ul class="has-scrollbar">
 418 | 
 419 |             <li class="scrollbar-item">
 420 |               <div class="featured-game-card">
 421 | 
 422 |                 <figure class="card-banner img-holder" style="--width: 450; --height: 600;">
 423 |                   <img src="./assets/images/featured-game-1.jpg" width="450" height="600" loading="lazy"
 424 |                     alt="Just for Gamers" class="img-cover">
 425 |                 </figure>
 426 | 
 427 |                 <div class="card-content">
 428 | 
 429 |                   <h3 class="h3">
 430 |                     <a href="#" class="card-title" tabindex="-1">
 431 |                       Just for <span class="span">Gamers</span>
 432 |                     </a>
 433 |                   </h3>
 434 | 
 435 |                   <span class="card-meta">
 436 |                     <ion-icon name="notifications"></ion-icon>
 437 | 
 438 |                     <span class="span">Playstation 5, Xbox</span>
 439 |                   </span>
 440 | 
 441 |                 </div>
 442 | 
 443 |                 <div class="card-content-overlay">
 444 | 
 445 |                   <img src="./assets/images/featured-game-icon.png" width="36" height="61" loading="lazy" alt=""
 446 |                     class="card-icon">
 447 | 
 448 |                   <h3 class="h3">
 449 |                     <a href="#" class="card-title">
 450 |                       Just for <span class="span">Gamers</span>
 451 |                     </a>
 452 |                   </h3>
 453 | 
 454 |                   <span class="card-meta">
 455 |                     <ion-icon name="notifications"></ion-icon>
 456 | 
 457 |                     <span class="span">Playstation 5, Xbox</span>
 458 |                   </span>
 459 | 
 460 |                 </div>
 461 | 
 462 |               </div>
 463 |             </li>
 464 | 
 465 |             <li class="scrollbar-item">
 466 |               <div class="featured-game-card">
 467 | 
 468 |                 <figure class="card-banner img-holder" style="--width: 450; --height: 600;">
 469 |                   <img src="./assets/images/featured-game-2.jpg" width="450" height="600" loading="lazy"
 470 |                     alt="Need for Speed" class="img-cover">
 471 |                 </figure>
 472 | 
 473 |                 <div class="card-content">
 474 | 
 475 |                   <h3 class="h3">
 476 |                     <a href="#" class="card-title" tabindex="-1">
 477 |                       Need for <span class="span">Speed</span>
 478 |                     </a>
 479 |                   </h3>
 480 | 
 481 |                   <span class="card-meta">
 482 |                     <ion-icon name="notifications"></ion-icon>
 483 | 
 484 |                     <span class="span">Playstation 5, Xbox</span>
 485 |                   </span>
 486 | 
 487 |                 </div>
 488 | 
 489 |                 <div class="card-content-overlay">
 490 | 
 491 |                   <img src="./assets/images/featured-game-icon.png" width="36" height="61" loading="lazy" alt=""
 492 |                     class="card-icon">
 493 | 
 494 |                   <h3 class="h3">
 495 |                     <a href="#" class="card-title">
 496 |                       Need for <span class="span">Speed</span>
 497 |                     </a>
 498 |                   </h3>
 499 | 
 500 |                   <span class="card-meta">
 501 |                     <ion-icon name="notifications"></ion-icon>
 502 | 
 503 |                     <span class="span">Playstation 5, Xbox</span>
 504 |                   </span>
 505 | 
 506 |                 </div>
 507 | 
 508 |               </div>
 509 |             </li>
 510 | 
 511 |             <li class="scrollbar-item">
 512 |               <div class="featured-game-card">
 513 | 
 514 |                 <figure class="card-banner img-holder" style="--width: 450; --height: 600;">
 515 |                   <img src="./assets/images/featured-game-3.jpg" width="450" height="600" loading="lazy"
 516 |                     alt="Egypt Hunting Gamers" class="img-cover">
 517 |                 </figure>
 518 | 
 519 |                 <div class="card-content">
 520 | 
 521 |                   <h3 class="h3">
 522 |                     <a href="#" class="card-title" tabindex="-1">
 523 |                       Egypt Hunting <span class="span">Gamers</span>
 524 |                     </a>
 525 |                   </h3>
 526 | 
 527 |                   <span class="card-meta">
 528 |                     <ion-icon name="notifications"></ion-icon>
 529 | 
 530 |                     <span class="span">Playstation 5, Xbox</span>
 531 |                   </span>
 532 | 
 533 |                 </div>
 534 | 
 535 |                 <div class="card-content-overlay">
 536 | 
 537 |                   <img src="./assets/images/featured-game-icon.png" width="36" height="61" loading="lazy" alt=""
 538 |                     class="card-icon">
 539 | 
 540 |                   <h3 class="h3">
 541 |                     <a href="#" class="card-title">
 542 |                       Egypt Hunting <span class="span">Gamers</span>
 543 |                     </a>
 544 |                   </h3>
 545 | 
 546 |                   <span class="card-meta">
 547 |                     <ion-icon name="notifications"></ion-icon>
 548 | 
 549 |                     <span class="span">Playstation 5, Xbox</span>
 550 |                   </span>
 551 | 
 552 |                 </div>
 553 | 
 554 |               </div>
 555 |             </li>
 556 | 
 557 |             <li class="scrollbar-item">
 558 |               <div class="featured-game-card">
 559 | 
 560 |                 <figure class="card-banner img-holder" style="--width: 450; --height: 600;">
 561 |                   <img src="./assets/images/featured-game-4.jpg" width="450" height="600" loading="lazy"
 562 |                     alt="Just for Gamers" class="img-cover">
 563 |                 </figure>
 564 | 
 565 |                 <div class="card-content">
 566 | 
 567 |                   <h3 class="h3">
 568 |                     <a href="#" class="card-title" tabindex="-1">
 569 |                       Just for <span class="span">Gamers</span>
 570 |                     </a>
 571 |                   </h3>
 572 | 
 573 |                   <span class="card-meta">
 574 |                     <ion-icon name="notifications"></ion-icon>
 575 | 
 576 |                     <span class="span">Playstation 5, Xbox</span>
 577 |                   </span>
 578 | 
 579 |                 </div>
 580 | 
 581 |                 <div class="card-content-overlay">
 582 | 
 583 |                   <img src="./assets/images/featured-game-icon.png" width="36" height="61" loading="lazy" alt=""
 584 |                     class="card-icon">
 585 | 
 586 |                   <h3 class="h3">
 587 |                     <a href="#" class="card-title">
 588 |                       Just for <span class="span">Gamers</span>
 589 |                     </a>
 590 |                   </h3>
 591 | 
 592 |                   <span class="card-meta">
 593 |                     <ion-icon name="notifications"></ion-icon>
 594 | 
 595 |                     <span class="span">Playstation 5, Xbox</span>
 596 |                   </span>
 597 | 
 598 |                 </div>
 599 | 
 600 |               </div>
 601 |             </li>
 602 | 
 603 |           </ul>
 604 | 
 605 |         </div>
 606 |       </section>
 607 | 
 608 | 
 609 | 
 610 | 
 611 | 
 612 |       <!-- 
 613 |         - #SHOP
 614 |       -->
 615 | 
 616 |       <section class="section shop" id="shop" aria-label="shop"
 617 |         style="background-image: url('./assets/images/shop-bg.jpg')">
 618 |         <div class="container">
 619 | 
 620 |           <h2 class="h2 section-title">
 621 |             Gaming Product <span class="span">Corner</span>
 622 |           </h2>
 623 | 
 624 |           <p class="section-text">
 625 |             Compete with 100 players on a remote island for winner takes showdown known issue where certain skin
 626 |             strategic
 627 |           </p>
 628 | 
 629 |           <ul class="has-scrollbar">
 630 | 
 631 |             <li class="scrollbar-item">
 632 |               <div class="shop-card">
 633 | 
 634 |                 <figure class="card-banner img-holder" style="--width: 300; --height: 260;">
 635 |                   <img src="./assets/images/shop-img-1.jpg" width="300" height="260" loading="lazy"
 636 |                     alt="Women Black T-Shirt" class="img-cover">
 637 |                 </figure>
 638 | 
 639 |                 <div class="card-content">
 640 | 
 641 |                   <a href="#" class="card-badge skewBg">t-shirt</a>
 642 | 
 643 |                   <h3 class="h3">
 644 |                     <a href="#" class="card-title">Women Black T-Shirt</a>
 645 |                   </h3>
 646 | 
 647 |                   <div class="card-wrapper">
 648 |                     <p class="card-price">$29.00</p>
 649 | 
 650 |                     <button class="card-btn">
 651 |                       <ion-icon name="basket"></ion-icon>
 652 |                     </button>
 653 |                   </div>
 654 | 
 655 |                 </div>
 656 | 
 657 |               </div>
 658 |             </li>
 659 | 
 660 |             <li class="scrollbar-item">
 661 |               <div class="shop-card">
 662 | 
 663 |                 <figure class="card-banner img-holder" style="--width: 300; --height: 260;">
 664 |                   <img src="./assets/images/shop-img-2.jpg" width="300" height="260" loading="lazy"
 665 |                     alt="Gears 5 Xbox Controller" class="img-cover">
 666 |                 </figure>
 667 | 
 668 |                 <div class="card-content">
 669 | 
 670 |                   <a href="#" class="card-badge skewBg">x-box</a>
 671 | 
 672 |                   <h3 class="h3">
 673 |                     <a href="#" class="card-title">Gears 5 Xbox Controller</a>
 674 |                   </h3>
 675 | 
 676 |                   <div class="card-wrapper">
 677 |                     <p class="card-price">$29.00</p>
 678 | 
 679 |                     <button class="card-btn">
 680 |                       <ion-icon name="basket"></ion-icon>
 681 |                     </button>
 682 |                   </div>
 683 | 
 684 |                 </div>
 685 | 
 686 |               </div>
 687 |             </li>
 688 | 
 689 |             <li class="scrollbar-item">
 690 |               <div class="shop-card">
 691 | 
 692 |                 <figure class="card-banner img-holder" style="--width: 300; --height: 260;">
 693 |                   <img src="./assets/images/shop-img-3.jpg" width="300" height="260" loading="lazy"
 694 |                     alt="GeForce RTX 2070" class="img-cover">
 695 |                 </figure>
 696 | 
 697 |                 <div class="card-content">
 698 | 
 699 |                   <a href="#" class="card-badge skewBg">Graphics</a>
 700 | 
 701 |                   <h3 class="h3">
 702 |                     <a href="#" class="card-title">GeForce RTX 2070</a>
 703 |                   </h3>
 704 | 
 705 |                   <div class="card-wrapper">
 706 |                     <p class="card-price">$29.00</p>
 707 | 
 708 |                     <button class="card-btn">
 709 |                       <ion-icon name="basket"></ion-icon>
 710 |                     </button>
 711 |                   </div>
 712 | 
 713 |                 </div>
 714 | 
 715 |               </div>
 716 |             </li>
 717 | 
 718 |             <li class="scrollbar-item">
 719 |               <div class="shop-card">
 720 | 
 721 |                 <figure class="card-banner img-holder" style="--width: 300; --height: 260;">
 722 |                   <img src="./assets/images/shop-img-4.jpg" width="300" height="260" loading="lazy"
 723 |                     alt="Virtual Reality Smiled" class="img-cover">
 724 |                 </figure>
 725 | 
 726 |                 <div class="card-content">
 727 | 
 728 |                   <a href="#" class="card-badge skewBg">VR-Box</a>
 729 | 
 730 |                   <h3 class="h3">
 731 |                     <a href="#" class="card-title">Virtual Reality Smiled</a>
 732 |                   </h3>
 733 | 
 734 |                   <div class="card-wrapper">
 735 |                     <p class="card-price">$29.00</p>
 736 | 
 737 |                     <button class="card-btn">
 738 |                       <ion-icon name="basket"></ion-icon>
 739 |                     </button>
 740 |                   </div>
 741 | 
 742 |                 </div>
 743 | 
 744 |               </div>
 745 |             </li>
 746 | 
 747 |           </ul>
 748 | 
 749 |         </div>
 750 |       </section>
 751 | 
 752 | 
 753 | 
 754 | 
 755 | 
 756 |       <!-- 
 757 |         - #BLOG
 758 |       -->
 759 | 
 760 |       <section class="section blog" id="blog" aria-label="blog">
 761 |         <div class="container">
 762 | 
 763 |           <h2 class="h2 section-title">
 764 |             Latest News & <span class="span">Articles</span>
 765 |           </h2>
 766 | 
 767 |           <p class="section-text">
 768 |             Compete With 100 Players On A Remote Island For Winner Takes Showdown Known Issue Where Certain Skin
 769 |             Strategic
 770 |           </p>
 771 | 
 772 |           <ul class="blog-list">
 773 | 
 774 |             <li>
 775 |               <div class="blog-card">
 776 | 
 777 |                 <figure class="card-banner img-holder" style="--width: 400; --height: 290;">
 778 |                   <img src="./assets/images/blog-1.jpg" width="400" height="290" loading="lazy"
 779 |                     alt="Shooter Action Video" class="img-cover">
 780 |                 </figure>
 781 | 
 782 |                 <div class="card-content">
 783 | 
 784 |                   <ul class="card-meta-list">
 785 | 
 786 |                     <li class="card-meta-item">
 787 |                       <ion-icon name="person-outline"></ion-icon>
 788 | 
 789 |                       <a href="#" class="item-text">Admin</a>
 790 |                     </li>
 791 | 
 792 |                     <li class="card-meta-item">
 793 |                       <ion-icon name="calendar-outline"></ion-icon>
 794 | 
 795 |                       <time datetime="2022-09-19" class="item-text">September 19, 2022</time>
 796 |                     </li>
 797 | 
 798 |                   </ul>
 799 | 
 800 |                   <h3>
 801 |                     <a href="#" class="card-title">Shooter Action Video</a>
 802 |                   </h3>
 803 | 
 804 |                   <p class="card-text">
 805 |                     Compete With 100 Players On A Remote Island Thats Winner Takes Showdown Known Issue.
 806 |                   </p>
 807 | 
 808 |                   <a href="#" class="card-link">
 809 |                     <span class="span">Read More</span>
 810 | 
 811 |                     <ion-icon name="caret-forward"></ion-icon>
 812 |                   </a>
 813 | 
 814 |                 </div>
 815 | 
 816 |               </div>
 817 |             </li>
 818 | 
 819 |             <li>
 820 |               <div class="blog-card">
 821 | 
 822 |                 <figure class="card-banner img-holder" style="--width: 400; --height: 290;">
 823 |                   <img src="./assets/images/blog-2.jpg" width="400" height="290" loading="lazy" alt="The Walking Dead"
 824 |                     class="img-cover">
 825 |                 </figure>
 826 | 
 827 |                 <div class="card-content">
 828 | 
 829 |                   <ul class="card-meta-list">
 830 | 
 831 |                     <li class="card-meta-item">
 832 |                       <ion-icon name="person-outline"></ion-icon>
 833 | 
 834 |                       <a href="#" class="item-text">Admin</a>
 835 |                     </li>
 836 | 
 837 |                     <li class="card-meta-item">
 838 |                       <ion-icon name="calendar-outline"></ion-icon>
 839 | 
 840 |                       <time datetime="2022-09-19" class="item-text">September 19, 2022</time>
 841 |                     </li>
 842 | 
 843 |                   </ul>
 844 | 
 845 |                   <h3>
 846 |                     <a href="#" class="card-title">The Walking Dead</a>
 847 |                   </h3>
 848 | 
 849 |                   <p class="card-text">
 850 |                     Compete With 100 Players On A Remote Island Thats Winner Takes Showdown Known Issue.
 851 |                   </p>
 852 | 
 853 |                   <a href="#" class="card-link">
 854 |                     <span class="span">Read More</span>
 855 | 
 856 |                     <ion-icon name="caret-forward"></ion-icon>
 857 |                   </a>
 858 | 
 859 |                 </div>
 860 | 
 861 |               </div>
 862 |             </li>
 863 | 
 864 |             <li>
 865 |               <div class="blog-card">
 866 | 
 867 |                 <figure class="card-banner img-holder" style="--width: 400; --height: 290;">
 868 |                   <img src="./assets/images/blog-3.jpg" width="400" height="290" loading="lazy"
 869 |                     alt="Defense Of The Ancients" class="img-cover">
 870 |                 </figure>
 871 | 
 872 |                 <div class="card-content">
 873 | 
 874 |                   <ul class="card-meta-list">
 875 | 
 876 |                     <li class="card-meta-item">
 877 |                       <ion-icon name="person-outline"></ion-icon>
 878 | 
 879 |                       <a href="#" class="item-text">Admin</a>
 880 |                     </li>
 881 | 
 882 |                     <li class="card-meta-item">
 883 |                       <ion-icon name="calendar-outline"></ion-icon>
 884 | 
 885 |                       <time datetime="2022-09-19" class="item-text">September 19, 2022</time>
 886 |                     </li>
 887 | 
 888 |                   </ul>
 889 | 
 890 |                   <h3>
 891 |                     <a href="#" class="card-title">Defense Of The Ancients</a>
 892 |                   </h3>
 893 | 
 894 |                   <p class="card-text">
 895 |                     Compete With 100 Players On A Remote Island Thats Winner Takes Showdown Known Issue.
 896 |                   </p>
 897 | 
 898 |                   <a href="#" class="card-link">
 899 |                     <span class="span">Read More</span>
 900 | 
 901 |                     <ion-icon name="caret-forward"></ion-icon>
 902 |                   </a>
 903 | 
 904 |                 </div>
 905 | 
 906 |               </div>
 907 |             </li>
 908 | 
 909 |           </ul>
 910 | 
 911 |         </div>
 912 |       </section>
 913 | 
 914 | 
 915 | 
 916 | 
 917 | 
 918 |       <!-- 
 919 |         - #NEWSLETTER
 920 |       -->
 921 | 
 922 |       <section class="newsletter" aria-label="newsletter">
 923 |         <div class="container">
 924 | 
 925 |           <div class="newsletter-card">
 926 | 
 927 |             <h2 class="h2">
 928 |               Our <span class="span">Newsletter</span>
 929 |             </h2>
 930 | 
 931 |             <form action="" class="newsletter-form">
 932 | 
 933 |               <div class="input-wrapper skewBg">
 934 |                 <input type="email" name="email_address" aria-label="email" placeholder="Enter your email..." required
 935 |                   class="email-field">
 936 | 
 937 |                 <ion-icon name="mail-outline"></ion-icon>
 938 |               </div>
 939 | 
 940 |               <button type="submit" class="btn newsletter-btn skewBg">
 941 |                 <span class="span">Subscribe</span>
 942 | 
 943 |                 <ion-icon name="paper-plane" aria-hidden="true"></ion-icon>
 944 |               </button>
 945 | 
 946 |             </form>
 947 | 
 948 |           </div>
 949 | 
 950 |         </div>
 951 |       </section>
 952 | 
 953 |     </article>
 954 |   </main>
 955 | 
 956 | 
 957 | 
 958 | 
 959 | 
 960 |   <!-- 
 961 |     - #FOOTER
 962 |   -->
 963 | 
 964 |   <footer class="footer">
 965 | 
 966 |     <div class="footer-top">
 967 |       <div class="container">
 968 | 
 969 |         <div class="footer-brand">
 970 | 
 971 |           <a href="#" class="logo">Gamics</a>
 972 | 
 973 |           <p class="footer-text">
 974 |             Gamics marketplace the relase etras thats sheets continig passag.
 975 |           </p>
 976 | 
 977 |           <ul class="contact-list">
 978 | 
 979 |             <li class="contact-item">
 980 |               <div class="contact-icon">
 981 |                 <ion-icon name="location"></ion-icon>
 982 |               </div>
 983 | 
 984 |               <address class="item-text">
 985 |                 Address : PO Box W75 Street lan West new queens
 986 |               </address>
 987 |             </li>
 988 | 
 989 |             <li class="contact-item">
 990 |               <div class="contact-icon">
 991 |                 <ion-icon name="headset"></ion-icon>
 992 |               </div>
 993 | 
 994 |               <a href="tel:+241245654235" class="item-text">Phone : +24 1245 654 235</a>
 995 |             </li>
 996 | 
 997 |             <li class="contact-item">
 998 |               <div class="contact-icon">
 999 |                 <ion-icon name="mail-open"></ion-icon>
1000 |               </div>
1001 | 
1002 |               <a href="mailto:info@exemple.com" class="item-text">Email : info@exemple.com</a>
1003 |             </li>
1004 | 
1005 |           </ul>
1006 | 
1007 |         </div>
1008 | 
1009 |         <ul class="footer-list">
1010 | 
1011 |           <li>
1012 |             <p class="footer-list-title">Products</p>
1013 |           </li>
1014 | 
1015 |           <li>
1016 |             <a href="#" class="footer-link">Graphics (26)</a>
1017 |           </li>
1018 | 
1019 |           <li>
1020 |             <a href="#" class="footer-link">Backgrounds (11)</a>
1021 |           </li>
1022 | 
1023 |           <li>
1024 |             <a href="#" class="footer-link">Fonts (9)</a>
1025 |           </li>
1026 | 
1027 |           <li>
1028 |             <a href="#" class="footer-link">Music (3)</a>
1029 |           </li>
1030 | 
1031 |           <li>
1032 |             <a href="#" class="footer-link">Photography (3)</a>
1033 |           </li>
1034 | 
1035 |         </ul>
1036 | 
1037 |         <ul class="footer-list">
1038 | 
1039 |           <li>
1040 |             <p class="footer-list-title">Need Help?</p>
1041 |           </li>
1042 | 
1043 |           <li>
1044 |             <a href="#" class="footer-link">Terms & Conditions</a>
1045 |           </li>
1046 | 
1047 |           <li>
1048 |             <a href="#" class="footer-link">Privacy Policy</a>
1049 |           </li>
1050 | 
1051 |           <li>
1052 |             <a href="#" class="footer-link">Refund Policy</a>
1053 |           </li>
1054 | 
1055 |           <li>
1056 |             <a href="#" class="footer-link">Affiliate</a>
1057 |           </li>
1058 | 
1059 |           <li>
1060 |             <a href="#" class="footer-link">Use Cases</a>
1061 |           </li>
1062 | 
1063 |         </ul>
1064 | 
1065 |         <div class="footer-wrapper">
1066 | 
1067 |           <div class="social-wrapper">
1068 | 
1069 |             <p class="footer-list-title">Follow Us</p>
1070 | 
1071 |             <ul class="social-list">
1072 | 
1073 |               <li>
1074 |                 <a href="#" class="social-link" style="background-color: #3b5998">
1075 |                   <ion-icon name="logo-facebook"></ion-icon>
1076 |                 </a>
1077 |               </li>
1078 | 
1079 |               <li>
1080 |                 <a href="#" class="social-link" style="background-color: #55acee">
1081 |                   <ion-icon name="logo-twitter"></ion-icon>
1082 |                 </a>
1083 |               </li>
1084 | 
1085 |               <li>
1086 |                 <a href="#" class="social-link" style="background-color: #d71e18">
1087 |                   <ion-icon name="logo-pinterest"></ion-icon>
1088 |                 </a>
1089 |               </li>
1090 | 
1091 |               <li>
1092 |                 <a href="#" class="social-link" style="background-color: #1565c0">
1093 |                   <ion-icon name="logo-linkedin"></ion-icon>
1094 |                 </a>
1095 |               </li>
1096 | 
1097 |             </ul>
1098 | 
1099 |           </div>
1100 | 
1101 |           <div class="footer-newsletter">
1102 | 
1103 |             <p class="footer-list-title">Newsletter Sign Up</p>
1104 | 
1105 |             <form action="" class="footer-newsletter">
1106 |               <input type="email" name="email_address" aria-label="email" placeholder="Enter your email" required
1107 |                 class="email-field">
1108 | 
1109 |               <button type="submit" class="footer-btn" aria-label="submit">
1110 |                 <ion-icon name="rocket"></ion-icon>
1111 |               </button>
1112 |             </form>
1113 | 
1114 |           </div>
1115 | 
1116 |         </div>
1117 | 
1118 |       </div>
1119 |     </div>
1120 | 
1121 |     <div class="footer-bottom">
1122 |       <div class="container">
1123 | 
1124 |         <p class="copyright">
1125 |           &copy; 2022 Gamics. All Right Reserved by <a href="#" class="copyright-link">codewithsadee</a>
1126 |         </p>
1127 | 
1128 |         <img src="./assets/images/footer-bottom-img.png" width="340" height="21" loading="lazy" alt=""
1129 |           class="footer-bottom-img">
1130 | 
1131 |       </div>
1132 |     </div>
1133 | 
1134 |   </footer>
1135 | 
1136 | 
1137 | 
1138 | 
1139 | 
1140 |   <!-- 
1141 |     - #BACK TO TOP
1142 |   -->
1143 | 
1144 |   <a href="#top" class="back-top-btn" aria-label="back to top" data-back-top-btn>
1145 |     <ion-icon name="caret-up"></ion-icon>
1146 |   </a>
1147 | 
1148 | 
1149 | 
1150 | 
1151 | 
1152 |   <!-- 
1153 |     - custom js link
1154 |   -->
1155 |   <script src="./assets/js/script.js" defer></script>
1156 | 
1157 |   <!-- 
1158 |     - ionicon link
1159 |   -->
1160 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
1161 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
1162 | 
1163 | </body>
1164 | 
1165 | </html>


--------------------------------------------------------------------------------
/index.txt:
--------------------------------------------------------------------------------
  1 | Gamics - Create Manage Matches
  2 | 
  3 | 
  4 | 
  5 | #---------- HEDER ----------#
  6 | 
  7 | Exclusive Black Friday ! Offer 
  8 | 10 
  9 | Days
 10 | 
 11 | Follow us on :
 12 | 
 13 | <ion-icon name="logo-facebook"></ion-icon>
 14 | <ion-icon name="logo-twitter"></ion-icon>
 15 | <ion-icon name="logo-pinterest"></ion-icon>
 16 | <ion-icon name="logo-linkedin"></ion-icon>
 17 | 
 18 | Gamics
 19 | 
 20 | Home
 21 | Live
 22 | Features
 23 | Shop
 24 | Blog
 25 | Contact
 26 | 
 27 | aria-label = cart
 28 | 
 29 | <ion-icon name="cart"></ion-icon>
 30 | 0
 31 | 
 32 | aria-label = open search
 33 | 
 34 | <ion-icon name="search-outline"></ion-icon>
 35 | 
 36 | aria-label = toggle menu
 37 | <ion-icon name="menu-outline" class="menu"></ion-icon>
 38 | <ion-icon name="close-outline" class="close"></ion-icon>
 39 | 
 40 | 
 41 | 
 42 | #---------- SEARCH BOX ----------#
 43 | 
 44 | aria-label = search
 45 | 
 46 | placeholder = Search here...
 47 | 
 48 | aria-label = submit search
 49 | <ion-icon name="search-outline"></ion-icon>
 50 | 
 51 | aria-label = close search
 52 | 
 53 | 
 54 | 
 55 | #---------- HERO ----------#
 56 | 
 57 | World Gaming
 58 | 
 59 | Create Manage Matches
 60 | 
 61 | Find technology or people for digital projects in public sector and Find an individual specialist develope researcher.
 62 | 
 63 | Read More
 64 | 
 65 | alt = hero banner
 66 | 
 67 | 
 68 | 
 69 | #---------- BRAND ----------#
 70 | 
 71 | alt = brand logo
 72 | 
 73 | 
 74 | 
 75 | #---------- LATEST GAME ----------#
 76 | 
 77 | Latest Releases
 78 | 
 79 | Create & Manage
 80 | 
 81 | alt = White Walker Daily
 82 | 
 83 | Zombie
 84 | 
 85 | White Walker
 86 | Daily
 87 | 
 88 | Entry Fee :
 89 | Free
 90 | 
 91 | alt = Hunter Killer II
 92 | 
 93 | Adventure
 94 | 
 95 | Hunter Killer
 96 | II
 97 | 
 98 | Entry Fee : 
 99 | $25.00
100 | 
101 | alt = Cyberpunk Daily
102 | 
103 | Action
104 | 
105 | Cyberpunk
106 | Daily
107 | 
108 | 
109 | 
110 | #---------- LIVE MATCH ----------#
111 | 
112 | Watch Live 
113 | Match
114 | 
115 | alt = Live Match Video
116 | 
117 | aria-label = play video
118 | <ion-icon name="play"></ion-icon>
119 | 
120 | alt = tokyo eagle
121 | 
122 | Upcoming Live Matches
123 | 
124 | 08:30
125 | 
126 | alt = new york hunter7
127 | 
128 | 
129 | 
130 | #---------- FEATURED GAME ----------#
131 | 
132 | All Released
133 | Games
134 | 
135 | alt = Just for Gamers
136 | 
137 | Just for
138 | Gamers
139 | 
140 | <ion-icon name="notifications"></ion-icon>
141 | 
142 | Playstation 5, Xbox
143 | 
144 | alt = Need for Speed
145 | 
146 | Need for
147 | Speed
148 | 
149 | alt = Egypt Hunting Gamers
150 | 
151 | Egypt Hunting
152 | Gamers
153 | 
154 | alt = Just for Gamers
155 | 
156 | Just for
157 | Gamers
158 | 
159 | 
160 | 
161 | #---------- SHOP ----------#
162 | 
163 | Gaming Product 
164 | Corner
165 | 
166 | Compete with 100 players on a remote island for winner takes showdown known issue where certain skin strategic
167 | 
168 | alt = Women Black T-Shirt
169 | 
170 | t-shirt
171 | 
172 | Women Black T-Shirt
173 | 
174 | $29.00
175 | 
176 | <ion-icon name="basket"></ion-icon>
177 | 
178 | 
179 | alt = Gears 5 Xbox Controller
180 | 
181 | x-box
182 | 
183 | Gears 5 Xbox Controller
184 | 
185 | 
186 | alt = GeForce RTX 2070
187 | 
188 | Graphics
189 | 
190 | GeForce RTX 2070
191 | 
192 | 
193 | alt = Virtual Reality Smiled
194 | 
195 | VR-Box
196 | 
197 | Virtual Reality Smiled
198 | 
199 | 
200 | 
201 | #---------- BLOG ----------#
202 | 
203 | Latest News &
204 | Articles
205 | 
206 | Compete With 100 Players On A Remote Island For Winner Takes Showdown Known Issue Where Certain Skin Strategic
207 | 
208 | alt = Shooter Action Video
209 | 
210 | <ion-icon name="person-outline"></ion-icon>
211 | Admin
212 | 
213 | <ion-icon name="calendar-outline"></ion-icon>
214 | September 19, 2022
215 | 
216 | Shooter Action Video
217 | 
218 | Compete With 100 Players On A Remote Island Thats Winner Takes Showdown Known Issue.
219 | 
220 | Read More
221 | 
222 | <ion-icon name="caret-forward"></ion-icon>
223 | 
224 | alt = The Walking Dead
225 | 
226 | alt = Defense Of The Ancients
227 | 
228 | 
229 | 
230 | #---------- NEWSLETTER ----------#
231 | 
232 | Our
233 | Newsletter
234 | 
235 | placeholder = Enter your email...
236 | 
237 | <ion-icon name="mail-outline"></ion-icon>
238 | 
239 | Subscribe
240 | <ion-icon name="paper-plane" aria-hidden="true"></ion-icon>
241 | 
242 | 
243 | 
244 | #---------- FOOTER ----------#
245 | 
246 | Gamics
247 | 
248 | Gamics marketplace the relase etras thats sheets continig passag.
249 | 
250 | <ion-icon name="location"></ion-icon>
251 | Address : PO Box W75 Street lan West new queens
252 | 
253 | <ion-icon name="headset"></ion-icon>
254 | Phone : +24 1245 654 235
255 | 
256 | <ion-icon name="mail-open"></ion-icon>
257 | Email : info@exemple.com
258 | 
259 | Products
260 | 
261 | Graphics (26)
262 | Backgrounds (11)
263 | Fonts (9)
264 | Music (3)
265 | Photography (3)
266 | 
267 | Need Help?
268 | 
269 | Terms & Conditions
270 | Privacy Policy
271 | Refund Policy
272 | Affiliate
273 | Use Cases
274 | 
275 | Follow Us
276 | 
277 | <ion-icon name="logo-facebook"></ion-icon>
278 | <ion-icon name="logo-twitter"></ion-icon>
279 | <ion-icon name="logo-pinterest"></ion-icon>
280 | <ion-icon name="logo-linkedin"></ion-icon>
281 | 
282 | Newsletter Sign Up
283 | 
284 | placeholder = Enter your email
285 | 
286 | aria-label = submit
287 | <ion-icon name="rocket"></ion-icon>
288 | 
289 | &copy; 2022 Gamics. All Right Reserved by codewithsadee
290 | 
291 | 
292 | 
293 | #---------- BACK TO TOP ----------#
294 | 
295 | aria-label = back to top
296 | 
297 | <ion-icon name="caret-up"></ion-icon>


--------------------------------------------------------------------------------
/readme-images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/gamics/3b73f9b59e50597cbe982a906b47cde5b28a3377/readme-images/desktop.png


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
  1 | # Essential Stuff
  2 | 
  3 | ## Html import links
  4 | 
  5 | Google font
  6 | 
  7 | ``` html
  8 | <link rel="preconnect" href="https://fonts.googleapis.com">
  9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 | <link
 11 |   href="https://fonts.googleapis.com/css2?family=Oxanium:wght@600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap"
 12 |   rel="stylesheet">
 13 | ```
 14 | 
 15 | Ionicon
 16 | 
 17 | ``` html
 18 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 19 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 20 | ```
 21 | 
 22 | ---
 23 | 
 24 | ## Colors
 25 | 
 26 | ``` css
 27 | --rich-black-fogra-29_95: hsla(222, 18%, 11%, 0.95);
 28 | --raisin-black-1: hsl(0, 0%, 16%);
 29 | --raisin-black-2: hsl(236, 17%, 17%);
 30 | --raisin-black-3: hsl(280, 11%, 11%);
 31 | --raisin-black-4: hsl(280, 8%, 15%);
 32 | --english-violet: hsl(274, 21%, 23%);
 33 | --eerie-black-1: hsl(277, 25%, 10%);
 34 | --eerie-black-2: hsl(280, 7%, 8%);
 35 | --roman-silver: hsl(220, 6%, 59%);
 36 | --quick-silver: hsl(0, 1%, 65%);
 37 | --light-gray-1: hsl(0, 0%, 80%);
 38 | --light-gray-2: hsl(0, 2%, 82%);
 39 | --marigold_75: hsla(42, 99%, 46%, 0.75);
 40 | --xiketic_90: hsla(280, 37%, 8%, 0.9);
 41 | --cultured-2: hsl(0, 0%, 97%);
 42 | --marigold: hsl(42, 99%, 46%);
 43 | --platinum: hsl(0, 0%, 89%);
 44 | --dim-gray: hsl(0, 0%, 42%);
 45 | --white_15: hsla(0, 0%, 100%, 0.15);
 46 | --white_10: hsla(0, 0%, 100%, 0.1);
 47 | --xiketic: hsl(277, 25%, 10%);
 48 | --silver: hsl(0, 0%, 78%);
 49 | --white: hsl(0, 0%, 100%);
 50 | --jet: hsl(236, 13%, 23%);
 51 | ```
 52 | 
 53 | ## Typography
 54 | 
 55 | ``` css
 56 | --ff-oxanium: 'Oxanium', cursive;
 57 | --ff-poppins: 'Poppins', sans-serif;
 58 | 
 59 | --fs-1: 7rem;
 60 | --fs-2: 4.5rem;
 61 | --fs-3: 3.6rem;
 62 | --fs-4: 2.4rem;
 63 | --fs-5: 2.2rem;
 64 | --fs-6: 2rem;
 65 | --fs-7: 1.6rem;
 66 | --fs-8: 1.5rem;
 67 | --fs-9: 1.4rem;
 68 | --fs-10: 1.3rem;
 69 | --fs-11: 1.2rem;
 70 | 
 71 | --fw-500: 500;
 72 | --fw-600: 600;
 73 | --fw-700: 700;
 74 | --fw-800: 800;
 75 | ```
 76 | 
 77 | ## Spacing
 78 | 
 79 | ``` css
 80 | --section-padding: 120px;
 81 | ```
 82 | 
 83 | ## Gradient
 84 | 
 85 | ``` css
 86 | --gradient: radial-gradient(circle, hsl(250, 7%, 17%), hsl(250, 11%, 11%));
 87 | ```
 88 | 
 89 | ## Shadow
 90 | 
 91 | ``` css
 92 | --shadow-1: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.2),
 93 |             inset 0px 2px 8px 0px hsla(0, 0%, 0%, 0.4);
 94 | --shadow-2: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.4);
 95 | --shadow-3: 0px 5px 10px 1px hsla(219, 98%, 17%, 0.2);
 96 | --shadow-4: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.15);
 97 | ```
 98 | 
 99 | ## Transition
100 | 
101 | ``` css
102 | --transition: 0.25s ease;
103 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
104 | ```
105 | 


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