├── LICENSE
├── README.md
├── assets
    ├── css
    │   └── style.css
    ├── images
    │   ├── Thumbs.db
    │   ├── body-bg.jpg
    │   ├── hero-banner-bg.png
    │   ├── hero-banner.png
    │   ├── logo.png
    │   ├── logo.svg
    │   ├── news-1.jpg
    │   ├── news-2.jpg
    │   ├── news-3.jpg
    │   ├── team-logo-1.png
    │   ├── team-logo-2.png
    │   ├── team-logo-3.png
    │   ├── team-logo-4.png
    │   ├── team-logo-5.png
    │   └── team-logo-6.png
    └── js
    │   └── script.js
├── favicon.svg
├── index.html
├── index.txt
├── readme-images
    └── desktop.png
└── style-guide.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Sadee
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | 
 3 |   <br />
 4 |   <br />
 5 | 
 6 |   <h2 align="center">GameHive - eSports Gaming Website</h2>
 7 | 
 8 |  GameHive is a fully responsive esports gaming website, <br />Responsive for all devices, build using HTML, CSS, and JavaScript.
 9 | 
10 |   <a href="https://codingstella.github.io/Gaming-website/"><strong>➥ Live Demo</strong></a>
11 | 
12 | </div>
13 | 
14 | <br />
15 | 
16 | ### Demo Screeshots
17 | 
18 | ![Unigine Desktop Demo](./readme-images/desktop.png "Desktop Demo")
19 | 


--------------------------------------------------------------------------------
/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 |   /* background color */
  24 |   --bg-purple: hsla(267, 100%, 63%, 1);
  25 |   --bg-purple-alpha-30: hsla(267, 100%, 63%, 0.3);
  26 |   --bg-dark-purple: hsla(279, 42%, 9%, 1);
  27 |   --bg-oxford-blue: hsla(240, 63%, 13%, 1);
  28 |   --bg-oxford-blue-alpha-95: hsla(240, 63%, 13%, 0.95);
  29 |   --bg-oxford-blue-alpha-90: hsla(240, 63%, 13%, 0.9);
  30 |   --bg-oxford-blue-alpha-80: hsla(240, 63%, 13%, 0.8);
  31 | 
  32 |   /* gradient color */
  33 |   --gradient-1: linear-gradient(to right bottom, hsl(299, 100%, 52%), hsl(291, 100%, 58%), hsl(283, 100%, 60%), hsl(273, 100%, 62%), hsl(262, 100%, 63%), hsl(242, 100%, 69%), hsl(223, 100%, 62%), hsl(210, 100%, 50%), hsl(203, 100%, 50%), hsl(198, 100%, 50%), hsl(192, 100%, 48%), hsl(185, 90%, 48%));
  34 |   --gradient-2: linear-gradient(90deg, transparent 0%, #9841ff 50%, transparent 100%);
  35 | 
  36 |   /* text color */
  37 |   --text-white: hsla(0, 0%, 100%, 1);
  38 |   --text-gainsboro: hsla(0, 0%, 87%, 1);
  39 |   --text-champagne-pink: hsla(23, 61%, 86%, 1);
  40 |   --text-purple: hsla(267, 100%, 63%, 1);
  41 | 
  42 |   /* border color */
  43 |   --border-space-cadet: hsl(240, 45%, 17%);
  44 |   --border-purple-alpha-30: hsla(267, 100%, 63%, 0.3); 
  45 | 
  46 |   /**
  47 |    * TYPOGRAPHY
  48 |    */
  49 | 
  50 |   /* font family */
  51 |   --fontFamily-oxanium: 'Oxanium', cursive;
  52 |   --fontFamily-work-sans: 'Work Sans', sans-serif;
  53 | 
  54 |   /* font size */
  55 |   --fontSize-1: 3.6rem;
  56 |   --fontSize-2: 2.4rem;
  57 |   --fontSize-3: 2rem;
  58 |   --fontSize-4: 1.7rem;
  59 |   --fontSize-5: 1.6rem;
  60 |   --fontSize-6: 1.5rem;
  61 |   --fontSize-7: 1.4rem;
  62 |   --fontSize-8: 1.2rem;
  63 | 
  64 |   /* font weight */
  65 |   --weight-regular: 400;
  66 |   --weight-semiBold: 600;
  67 |   --weight-bold: 700;
  68 | 
  69 |   /**
  70 |    * SPACING
  71 |    */
  72 | 
  73 |   --section-spacing: 60px;
  74 | 
  75 |   /**
  76 |    * BOX SHADOW
  77 |    */
  78 | 
  79 |   --shadow: 0px 2px 5px 0px hsla(0, 0%, 0%, 0.2);
  80 | 
  81 |   /**
  82 |    * BORDER RADIUS
  83 |    */
  84 | 
  85 |   --radius-circle: 50%;
  86 |   --radius-5: 5px;
  87 |   --radius-3: 3px;
  88 | 
  89 |   /**
  90 |    * CLIP PATH
  91 |    */
  92 | 
  93 |   --clip-path-1: polygon(0 0, 100% 0, 100% 0, 0 0);
  94 |   --clip-path-2: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  95 |   --clip-path-3: polygon(0% 0%, 90% 0, 100% 30%, 100% 100%, 0 100%);
  96 |   --clip-path-4: polygon(90% 0, 100% 40%, 100% 100%, 0 100%, 0 0);
  97 |   --clip-path-5: polygon(100% 0, 100% 100%, 10% 100%, 0 60%, 0 0);
  98 |   --clip-path-6: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 40%);
  99 |   --clip-path-7: polygon(100% 0, 100% 60%, 90% 100%, 0 100%, 0 0);
 100 |   --clip-path-8: polygon(0% 0%, 70% 0, 100% 30%, 100% 100%, 0 100%);
 101 |   --clip-path-9: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
 102 | 
 103 |   /**
 104 |    * TRANSITION
 105 |    */
 106 | 
 107 |   --transition-1: 250ms ease;
 108 |   --transition-2: 500ms ease;
 109 |   --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
 110 | 
 111 | }
 112 | 
 113 | 
 114 | 
 115 | 
 116 | 
 117 | /*-----------------------------------*\
 118 |   #RESET
 119 | \*-----------------------------------*/
 120 | 
 121 | *,
 122 | *::before,
 123 | *::after {
 124 |   margin: 0;
 125 |   padding: 0;
 126 |   box-sizing: border-box;
 127 | }
 128 | 
 129 | li { list-style: none; }
 130 | 
 131 | a,
 132 | img,
 133 | time,
 134 | span,
 135 | input,
 136 | button,
 137 | textarea,
 138 | ion-icon { display: block; }
 139 | 
 140 | a {
 141 |   color: inherit;
 142 |   text-decoration: none;
 143 | }
 144 | 
 145 | img { height: auto; }
 146 | 
 147 | input,
 148 | button,
 149 | textarea {
 150 |   background: none;
 151 |   border: none;
 152 |   font: inherit;
 153 | }
 154 | 
 155 | input,
 156 | textarea { width: 100%; }
 157 | 
 158 | button { cursor: pointer; }
 159 | 
 160 | ion-icon { pointer-events: none; }
 161 | 
 162 | address { font-style: normal; }
 163 | 
 164 | html {
 165 |   font-size: 10px;
 166 |   scroll-behavior: smooth;
 167 | }
 168 | 
 169 | body {
 170 |   background-color: var(--bg-dark-purple);
 171 |   background-image: url("../images/body-bg.jpg");
 172 |   background-repeat: repeat;
 173 |   color: var(--text-gainsboro);
 174 |   font-family: var(--fontFamily-oxanium);
 175 |   font-size: var(--fontSize-4);
 176 |   font-weight: var(--weight-regular);
 177 |   line-height: 1.6;
 178 |   overflow-x: hidden;
 179 | }
 180 | 
 181 | ::-webkit-scrollbar { width: 8px; }
 182 | 
 183 | ::-webkit-scrollbar-track { background-color: var(--bg-dark-purple); }
 184 | 
 185 | ::-webkit-scrollbar-thumb { background-color: var(--bg-purple); }
 186 | 
 187 | 
 188 | 
 189 | 
 190 | 
 191 | /*-----------------------------------*\
 192 |   #REUSED STYLE
 193 | \*-----------------------------------*/
 194 | 
 195 | .container { padding-inline: 12px; }
 196 | 
 197 | .has-before,
 198 | .has-after {
 199 |   position: relative;
 200 |   z-index: 1;
 201 | }
 202 | 
 203 | .has-before::before,
 204 | .has-after::after {
 205 |   content: "";
 206 |   position: absolute;
 207 | }
 208 | 
 209 | .title { color: var(--text-white); }
 210 | 
 211 | .h1,
 212 | .h3 { line-height: 1.3; }
 213 | 
 214 | .h1 {
 215 |   font-size: var(--fontSize-1);
 216 |   font-weight: var(--weight-semiBold);
 217 | }
 218 | 
 219 | .h2 {
 220 |   font-size: var(--fontSize-2);
 221 |   line-height: 1.4;
 222 | }
 223 | 
 224 | .h3 { font-size: var(--fontSize-3); }
 225 | 
 226 | .section-title,
 227 | .section-subtitle,
 228 | .section-text { text-align: center; }
 229 | 
 230 | .section-subtitle {
 231 |   color: var(--text-white);
 232 |   font-weight: var(--weight-semiBold);
 233 |   font-size: var(--fontSize-5);
 234 |   text-transform: uppercase;
 235 | }
 236 | 
 237 | .btn {
 238 |   position: relative;
 239 |   background-image: var(--gradient-1);
 240 |   color: var(--text-white);
 241 |   font-size: var(--fontSize-6);
 242 |   font-weight: var(--weight-semiBold);
 243 |   max-width: max-content;
 244 |   min-width: 180px;
 245 |   height: 50px;
 246 |   display: grid;
 247 |   place-items: center;
 248 |   padding-inline: 30px;
 249 |   clip-path: var(--clip-path-3);
 250 |   overflow: hidden;
 251 | }
 252 | 
 253 | .btn::before {
 254 |   content: "";
 255 |   position: absolute;
 256 |   top: var(--top, 50%);
 257 |   left: var(--left, 50%);
 258 |   width: 250%;
 259 |   padding-block-end: 250%;
 260 |   background-color: var(--bg-purple);
 261 |   transform: translate(-50%, -50%) scale(0);
 262 |   border-radius: var(--radius-circle);
 263 |   z-index: -1;
 264 |   transition: transform var(--transition-2);
 265 | }
 266 | 
 267 | .btn:is(:hover, :focus-visible)::before { transform: translate(-50%, -50%) scale(1); }
 268 | 
 269 | .w-100 { width: 100%; }
 270 | 
 271 | .section { padding-block: var(--section-spacing); }
 272 | 
 273 | .section-title {
 274 |   margin-block: 10px;
 275 |   text-transform: uppercase;
 276 | }
 277 | 
 278 | .section-title .span {
 279 |   display: inline;
 280 |   color: var(--text-purple);
 281 | }
 282 | 
 283 | .section-text {
 284 |   margin-block-end: 40px;
 285 |   max-width: 480px;
 286 |   margin-inline: auto;
 287 | }
 288 | 
 289 | .social-wrapper {
 290 |   display: flex;
 291 |   align-items: center;
 292 |   gap: 10px;
 293 | }
 294 | 
 295 | .img-holder {
 296 |   background-color: var(--bg-purple);
 297 |   aspect-ratio: var(--width) / var(--height);
 298 |   overflow: hidden;
 299 | }
 300 | 
 301 | .img-cover {
 302 |   width: 100%;
 303 |   height: 100%;
 304 |   object-fit: cover;
 305 | }
 306 | 
 307 | [data-reveal] {
 308 |   opacity: 0;
 309 |   transition: var(--transition-2);
 310 | }
 311 | 
 312 | [data-reveal="left"] { transform: translateX(-20px); }
 313 | 
 314 | [data-reveal="right"] { transform: translateX(20px); }
 315 | 
 316 | [data-reveal="bottom"] { transform: translateY(20px); }
 317 | 
 318 | [data-reveal].revealed {
 319 |   opacity: 1;
 320 |   transform: translate(0);
 321 | }
 322 | 
 323 | 
 324 | 
 325 | 
 326 | 
 327 | /*-----------------------------------*\
 328 |   #HEADER
 329 | \*-----------------------------------*/
 330 | 
 331 | .header .btn { display: none; }
 332 | 
 333 | .header {
 334 |   position: absolute;
 335 |   top: 0;
 336 |   left: 0;
 337 |   width: 100%;
 338 |   background-color: var(--bg-oxford-blue);
 339 |   padding: 10px 12px;
 340 |   z-index: 4;
 341 | }
 342 | 
 343 | .header.active {
 344 |   position: fixed;
 345 |   animation: slideUP 1s ease forwards;
 346 | }
 347 | 
 348 | @keyframes slideUP {
 349 |   0% { transform: translateY(-100%); }
 350 |   100% { transform: translateY(0); }
 351 | }
 352 | 
 353 | .header .container {
 354 |   display: flex;
 355 |   justify-content: space-between;
 356 |   align-items: center;
 357 | }
 358 | 
 359 | .nav-toggle-btn .line {
 360 |   height: 3px;
 361 |   width: 10px;
 362 |   margin-block: 4px;
 363 |   background-color: var(--text-gainsboro);
 364 |   border-radius: 8px;
 365 |   transition: var(--transition-1);
 366 | }
 367 | 
 368 | .nav-toggle-btn .line-2 { width: 20px; }
 369 | 
 370 | .nav-toggle-btn .line-3 { margin-inline-start: auto; }
 371 | 
 372 | .nav-toggle-btn.active .line-2 { transform: rotate(-45deg); }
 373 | 
 374 | .nav-toggle-btn.active .line-1 { transform: rotate(45deg) translate(4px, 1.5px); }
 375 | 
 376 | .nav-toggle-btn.active .line-3 { transform: rotate(45deg) translate(-3px, -1px); }
 377 | 
 378 | .navbar {
 379 |   position: absolute;
 380 |   top: calc(100% - 1px);
 381 |   right: 12px;
 382 |   left: 12px;
 383 |   background-color: var(--bg-oxford-blue);
 384 |   padding: 0 15px;
 385 |   clip-path: var(--clip-path-1);
 386 |   visibility: hidden;
 387 |   transition: clip-path 500ms var(--cubic-out);
 388 | }
 389 | 
 390 | .navbar.active {
 391 |   clip-path: var(--clip-path-2);
 392 |   visibility: visible;
 393 | }
 394 | 
 395 | .navbar-link {
 396 |   padding: 12px 25px;
 397 |   text-transform: uppercase;
 398 |   font-size: var(--fontSize-7);
 399 |   font-weight: var(--weight-semiBold);
 400 |   color: var(--text-white);
 401 | }
 402 | 
 403 | .navbar-item { border-block-start: 1px solid var(--border-space-cadet); }
 404 | 
 405 | .navbar-item:last-child { border-block-end: 1px solid var(--border-space-cadet); }
 406 | 
 407 | 
 408 | 
 409 | 
 410 | 
 411 | /*-----------------------------------*\
 412 |   #HERO
 413 | \*-----------------------------------*/
 414 | 
 415 | .hero {
 416 |   padding-block-start: 170px;
 417 |   text-align: center;
 418 | }
 419 | 
 420 | .hero .section-subtitle { letter-spacing: 5px; }
 421 | 
 422 | .hero-title { margin-block: 20px 25px; }
 423 | 
 424 | .hero .btn { margin-inline: auto; }
 425 | 
 426 | .hero::before {
 427 |   background-image: var(--gradient-2);
 428 |   bottom: 0;
 429 |   left: 0;
 430 |   width: 100%;
 431 |   height: 4px;
 432 |   z-index: 1;
 433 | }
 434 | 
 435 | .hero-banner {
 436 |   position: relative;
 437 |   margin-block-start: 50px;
 438 | }
 439 | 
 440 | .hero-banner-bg { display: none; }
 441 | 
 442 | 
 443 | 
 444 | 
 445 | 
 446 | /*-----------------------------------*\
 447 |   #UPCOMING
 448 | \*-----------------------------------*/
 449 | 
 450 | .upcoming-item:not(:last-child) { margin-block-end: 90px; }
 451 | 
 452 | .upcoming-card {
 453 |   display: flex;
 454 |   justify-content: space-between;
 455 |   align-items: center;
 456 | }
 457 | 
 458 | .upcoming-card::before {
 459 |   top: 50%;
 460 |   background-image: var(--gradient-1);
 461 |   transform: translateY(-50%);
 462 |   width: 90%;
 463 |   height: 80px;
 464 |   z-index: -1;
 465 |   opacity: 0.3;
 466 |   border-radius: var(--radius-5);
 467 | }
 468 | 
 469 | .upcoming-card.left::before {
 470 |   right: 0;
 471 |   clip-path: var(--clip-path-4);
 472 | }
 473 | 
 474 | .upcoming-card.right::before {
 475 |   left: 0;
 476 |   clip-path: var(--clip-path-6);
 477 | }
 478 | 
 479 | .upcoming-card .card-title { text-transform: uppercase; }
 480 | 
 481 | .upcoming-card.left .card-title {
 482 |   margin-inline-end: 50px;
 483 |   text-align: right;
 484 | }
 485 | 
 486 | .upcoming-card.right .card-title {
 487 |   margin-inline-start: 50px;
 488 |   text-align: left;
 489 | }
 490 | 
 491 | .upcoming-card .card-meta {
 492 |   position: absolute;
 493 |   bottom: -20px;
 494 |   left: 50%;
 495 |   transform: translateX(-50%);
 496 |   background-image: var(--gradient-1);
 497 |   width: max-content;
 498 |   padding: 6px 20px;
 499 |   font-size: var(--fontSize-7);
 500 |   font-weight: var(--weight-semiBold);
 501 |   text-transform: uppercase;
 502 |   border-radius: var(--radius-3);
 503 | }
 504 | 
 505 | .upcoming-card.left .card-meta { clip-path: var(--clip-path-5); }
 506 | 
 507 | .upcoming-card.right .card-meta { clip-path: var(--clip-path-7); }
 508 | 
 509 | .upcoming-card .card-banner { width: 30%; }
 510 | 
 511 | .upcoming-card.right .card-banner { order: 1; }
 512 | 
 513 | .upcoming-time { margin-block: 50px 30px; }
 514 | 
 515 | .upcoming-time :is(.time, .date) { text-align: center; }
 516 | 
 517 | .upcoming-time .time {
 518 |   color: var(--text-white);
 519 |   font-size: var(--fontSize-1);
 520 |   font-weight: var(--weight-bold);
 521 |   line-height: 1;
 522 | }
 523 | 
 524 | .upcoming-time .date {
 525 |   font-size: var(--fontSize-7);
 526 |   font-weight: var(--weight-semiBold);
 527 |   margin-block: 5px;
 528 | }
 529 | 
 530 | .upcoming-item .social-wrapper { justify-content: center; }
 531 | 
 532 | .upcoming-item .social-link {
 533 |   color: var(--text-white);
 534 |   font-size: 2.5rem;
 535 |   transition: var(--transition-1);
 536 | }
 537 | 
 538 | .upcoming-item .social-link:is(:hover, :focus-visible) { color: var(--text-purple); }
 539 | 
 540 | 
 541 | 
 542 | 
 543 | 
 544 | /*-----------------------------------*\
 545 |   #NEWS
 546 | \*-----------------------------------*/
 547 | 
 548 | .news-list {
 549 |   display: grid;
 550 |   gap: 30px;
 551 | }
 552 | 
 553 | .news-card {
 554 |   background-color: var(--bg-oxford-blue-alpha-90);
 555 |   box-shadow: var(--shadow);
 556 | }
 557 | 
 558 | .news-card .card-content {
 559 |   position: relative;
 560 |   padding: 30px;
 561 | }
 562 | 
 563 | .card-tag {
 564 |   position: absolute;
 565 |   bottom: 100%;
 566 |   left: 0;
 567 |   background-image: var(--gradient-1);
 568 |   color: var(--text-white);
 569 |   font-size: var(--fontSize-8);
 570 |   font-weight: var(--weight-semiBold);
 571 |   text-transform: uppercase;
 572 |   height: 30px;
 573 |   line-height: 32px;
 574 |   padding-inline: 20px;
 575 |   clip-path: var(--clip-path-3);
 576 | }
 577 | 
 578 | .news-card :is(.card-meta-list, .card-meta-item) {
 579 |   display: flex;
 580 |   align-items: center;
 581 | }
 582 | 
 583 | .news-card .card-meta-list {
 584 |   flex-wrap: wrap;
 585 |   gap: 5px 10px;
 586 | }
 587 | 
 588 | .news-card .card-meta-item { gap: 5px; }
 589 | 
 590 | .news-card .card-meta-item ion-icon { color: var(--text-purple); }
 591 | 
 592 | .news-card .card-meta-text,
 593 | .news-card .link {
 594 |   color: var(--text-champagne-pink);
 595 |   font-size: var(--fontSize-7);
 596 |   font-weight: var(--weight-bold);
 597 |   text-transform: uppercase;
 598 | }
 599 | 
 600 | .news-card .h3 { margin-block: 15px 10px; }
 601 | 
 602 | .news-card .card-title {
 603 |   display: inline;
 604 |   background-image: linear-gradient(to left, var(--bg-purple), var(--bg-purple));
 605 |   background-repeat: no-repeat;
 606 |   background-position: left bottom;
 607 |   background-size: 0% 4px;
 608 |   transition: var(--transition-2);
 609 | }
 610 | 
 611 | .news-card .card-title:is(:hover, :focus-visible) { background-size: 100% 4px; }
 612 | 
 613 | .news-card .link {
 614 |   max-width: max-content;
 615 |   margin-block-start: 15px;
 616 |   padding-inline-start: 30px;
 617 |   transition: var(--transition-1);
 618 | }
 619 | 
 620 | .news-card .link::before {
 621 |   top: 50%;
 622 |   left: 0;
 623 |   transform: translateY(-100%);
 624 |   width: 20px;
 625 |   height: 4px;
 626 |   background-color: var(--bg-purple);
 627 | }
 628 | 
 629 | .news-card .link:is(:hover, :focus-visible) { color: var(--text-purple); }
 630 | 
 631 | 
 632 | 
 633 | 
 634 | 
 635 | /*-----------------------------------*\
 636 |   #FOOTER
 637 | \*-----------------------------------*/
 638 | 
 639 | .footer-top .container {
 640 |   display: grid;
 641 |   gap: 35px;
 642 | }
 643 | 
 644 | .footer-text { margin-block: 20px 25px; }
 645 | 
 646 | .social-list {
 647 |   display: flex;
 648 |   gap: 10px;
 649 | }
 650 | 
 651 | .footer .social-link {
 652 |   width: 40px;
 653 |   height: 40px;
 654 |   background-color: var(--bg-purple-alpha-30);
 655 |   display: grid;
 656 |   place-items: center;
 657 |   clip-path: var(--clip-path-8);
 658 |   transition: var(--transition-1);
 659 | }
 660 | 
 661 | .footer .social-link:is(:hover, :focus-visible) {
 662 |   background-color: var(--bg-purple);
 663 |   transform: translateY(-2px);
 664 | }
 665 | 
 666 | .footer-list-title {
 667 |   font-size: var(--fontSize-3);
 668 |   font-weight: var(--weight-semiBold);
 669 |   line-height: 1;
 670 |   position: relative;
 671 |   padding-block-end: 10px;
 672 |   margin-block-end: 20px;
 673 |   max-width: max-content;
 674 | }
 675 | 
 676 | .footer-list-title::after {
 677 |   bottom: 0;
 678 |   left: 0;
 679 |   width: 50%;
 680 |   height: 4px;
 681 |   background-color: var(--bg-purple);
 682 | }
 683 | 
 684 | .footer-link {
 685 |   padding-block: 5px;
 686 |   color: var(--text-white);
 687 |   transition: var(--transition-1);
 688 | }
 689 | 
 690 | .footer-link:is(:hover, :focus-visible) { color: var(--text-purple); }
 691 | 
 692 | .contact-item .span {
 693 |   color: var(--text-purple);
 694 |   font-size: var(--fontSize-7);
 695 |   text-transform: uppercase;
 696 |   font-weight: var(--weight-semiBold);
 697 | }
 698 | 
 699 | .contact-item:not(:last-child) { margin-block-end: 15px; }
 700 | 
 701 | .input-field {
 702 |   background-color: var(--bg-oxford-blue-alpha-90);
 703 |   color: var(--text-white);
 704 |   font-size: var(--fontSize-5);
 705 |   padding: 18px 12px;
 706 |   box-shadow: var(--shadow);
 707 |   border: 2px solid var(--border-purple-alpha-30);
 708 |   margin-block-end: 15px;
 709 |   outline: none;
 710 | }
 711 | 
 712 | .input-field::placeholder { color: var(--text-white); }
 713 | 
 714 | .footer-bottom {
 715 |   clip-path: var(--clip-path-9);
 716 |   background-color: var(--bg-oxford-blue-alpha-80);
 717 | }
 718 | 
 719 | .copyright { padding: 30px 20px; }
 720 | 
 721 | 
 722 | 
 723 | 
 724 | 
 725 | /*-----------------------------------*\
 726 |   #BACK TO TOP
 727 | \*-----------------------------------*/
 728 | 
 729 | .back-top-btn {
 730 |   position: fixed;
 731 |   bottom: 10px;
 732 |   right: 20px;
 733 |   width: 50px;
 734 |   height: 50px;
 735 |   background-image: var(--gradient-1);
 736 |   display: grid;
 737 |   place-items: center;
 738 |   font-size: 2.1rem;
 739 |   clip-path: var(--clip-path-8);
 740 |   opacity: 0;
 741 |   transition: var(--transition-1);
 742 |   z-index: 4;
 743 | }
 744 | 
 745 | .back-top-btn.active {
 746 |   opacity: 1;
 747 |   transform: translateY(-20px);
 748 | }
 749 | 
 750 | 
 751 | 
 752 | 
 753 | 
 754 | /*-----------------------------------*\
 755 |   #CUSTOM CURSOR
 756 | \*-----------------------------------*/
 757 | 
 758 | .cursor { display: none; }
 759 | 
 760 | 
 761 | 
 762 | 
 763 | 
 764 | /*-----------------------------------*\
 765 |   #MEDIA QUERIES
 766 | \*-----------------------------------*/
 767 | 
 768 | /**
 769 |  * responsive for large than 575px screen
 770 |  */
 771 | 
 772 | @media (min-width: 575px) {
 773 | 
 774 |   /**
 775 |    * REUSED STYLE
 776 |    */
 777 | 
 778 |   .container {
 779 |     max-width: 540px;
 780 |     width: 100%;
 781 |     margin-inline: auto;
 782 |   }
 783 | 
 784 | 
 785 | 
 786 |   /**
 787 |    * HEADER
 788 |    */
 789 | 
 790 |   .header .logo img { width: 160px; }
 791 | 
 792 | 
 793 | 
 794 |   /**
 795 |    * UPCOMING
 796 |    */
 797 | 
 798 |   .upcoming-card.left .card-meta {
 799 |     left: auto;
 800 |     right: -15%;
 801 |   }
 802 | 
 803 |   .upcoming-card.right .card-meta { left: 25%; }
 804 | 
 805 | 
 806 | 
 807 |   /**
 808 |    * FOOTER
 809 |    */
 810 | 
 811 |   .footer-top .container { grid-template-columns: 1fr 1fr; }
 812 | 
 813 | }
 814 | 
 815 | 
 816 | 
 817 | 
 818 | 
 819 | /**
 820 |  * responsive for large than 768px screen
 821 |  */
 822 | 
 823 | @media (min-width: 768px) {
 824 | 
 825 |   /**
 826 |    * CUSTOM PROPERTY
 827 |    */
 828 | 
 829 |   :root {
 830 | 
 831 |     /**
 832 |      * TYPOGRAPHY
 833 |      */
 834 | 
 835 |     /* font size */
 836 |     --fontSize-1: 6.5rem;
 837 |     --fontSize-2: 3.2rem;
 838 | 
 839 |   }
 840 | 
 841 | 
 842 | 
 843 |   /**
 844 |    * REUSED STYLE
 845 |    */
 846 | 
 847 |   .container { max-width: 720px; }
 848 | 
 849 |   .h1 { line-height: 1; }
 850 | 
 851 | 
 852 | 
 853 |   /**
 854 |    * HERO
 855 |    */
 856 | 
 857 |   .hero .section-subtitle { letter-spacing: 10px; }
 858 | 
 859 |   .hero-banner-bg {
 860 |     display: block;
 861 |     width: 100%;
 862 |     position: absolute;
 863 |     bottom: 0;
 864 |     left: 0;
 865 |     transform: scale(1.3);
 866 |     transform-origin: bottom;
 867 |     z-index: -1;
 868 |   }
 869 | 
 870 | 
 871 | 
 872 |   /**
 873 |    * UPCOMING
 874 |    */
 875 | 
 876 |   .upcoming-card::before { height: 110px; }
 877 | 
 878 |   .upcoming-card .card-meta {
 879 |     padding-block: 12px;
 880 |     bottom: 20px;
 881 |   }
 882 | 
 883 |   .upcoming-card .card-title { --fontSize-3: 2.8rem; }
 884 | 
 885 |   .upcoming-card.left .card-meta { right: -10%; }
 886 | 
 887 |   .upcoming-card.right .card-meta { left: 20%; }
 888 | 
 889 |   .upcoming-time .time { --fontSize-1: 5rem; }
 890 | 
 891 | 
 892 | 
 893 |   /**
 894 |    * NEWS 
 895 |    */
 896 | 
 897 |   .news-list { grid-template-columns: 1fr 1fr; }
 898 | 
 899 | 
 900 | 
 901 |   /**
 902 |    * CUSTOM CURSOR
 903 |    */
 904 | 
 905 |   .cursor {
 906 |     display: block;
 907 |     position: fixed;
 908 |     top: 0;
 909 |     left: 0;
 910 |     width: 30px;
 911 |     height: 30px;
 912 |     background-color: var(--bg-purple);
 913 |     border-radius: var(--radius-circle);
 914 |     transform: translate(-50%, -50%);
 915 |     opacity: 0;
 916 |     pointer-events: none;
 917 |     z-index: 6;
 918 |     transition: var(--transition-1);
 919 |     transition-property: opacity, transform;
 920 |   }
 921 | 
 922 |   body:hover .cursor { opacity: 0.5; }
 923 | 
 924 |   body .cursor.hovered {
 925 |     transform: translate(-50%, -50%) scale(1.3);
 926 |     opacity: 0.75;
 927 |   }
 928 | 
 929 | }
 930 | 
 931 | 
 932 | 
 933 | 
 934 | 
 935 | /**
 936 |  * responsive for large than 992px screen
 937 |  */
 938 | 
 939 | @media (min-width: 992px) {
 940 | 
 941 |   /**
 942 |    * CUSTOM PROPERTY
 943 |    */
 944 | 
 945 |   :root {
 946 |     
 947 |     /**
 948 |      * TYPOGRAPHY
 949 |      */
 950 | 
 951 |     /* font size */
 952 |     --fontSize-2: 4.5rem;
 953 | 
 954 |     /**
 955 |      * SPACING
 956 |      */
 957 | 
 958 |     --section-spacing: 100px;
 959 | 
 960 |   }
 961 | 
 962 | 
 963 | 
 964 |   /**
 965 |    * REUSED STYLE
 966 |    */
 967 | 
 968 |   .container { max-width: 960px; }
 969 | 
 970 |   .h2 { line-height: 1.1; }
 971 | 
 972 | 
 973 | 
 974 |   /**
 975 |    * HEADER
 976 |    */
 977 | 
 978 |   .nav-toggle-btn { display: none; }
 979 | 
 980 |   .navbar,
 981 |   .navbar.active {
 982 |     all: unset;
 983 |     display: block;
 984 |   }
 985 | 
 986 |   .navbar-item,
 987 |   .navbar-item:last-child { border: none; }
 988 | 
 989 |   .navbar-list { display: flex; }
 990 | 
 991 |   .header .btn {
 992 |     display: grid;
 993 |     text-align: center;
 994 |   }
 995 | 
 996 | 
 997 | 
 998 |   /**
 999 |    * HERO
1000 |    */
1001 | 
1002 |   .hero-banner-bg { transform: scale(1.2); }
1003 | 
1004 | 
1005 | 
1006 |   /**
1007 |    * UPCOMING
1008 |    */
1009 | 
1010 |   .upcoming-item {
1011 |     display: grid;
1012 |     grid-template-columns: 1fr 0.5fr 1fr;
1013 |     align-items: center;
1014 |   }
1015 | 
1016 |   .upcoming-time { margin-block: 0; }
1017 | 
1018 |   .upcoming-card .card-meta {
1019 |     left: 50%;
1020 |     bottom: -30px;
1021 |     transform: translateX(-50%);
1022 |   }
1023 | 
1024 |   .upcoming-card.right .card-meta { left: 50%; }
1025 | 
1026 | 
1027 | 
1028 |   /**
1029 |    * NEWS
1030 |    */
1031 | 
1032 |   .news-list { grid-template-columns: repeat(3, 1fr); }
1033 | 
1034 | 
1035 | 
1036 |   /**
1037 |    * FOOTER
1038 |    */
1039 |    
1040 |   .footer-top .container { grid-template-columns: repeat(4, 1fr); }
1041 | 
1042 | }
1043 | 
1044 | 
1045 | 
1046 | 
1047 | 
1048 | /**
1049 |  * responsive for large than 1200px screen
1050 |  */
1051 | 
1052 | @media (min-width: 1200px) {
1053 | 
1054 |   /**
1055 |    * REUSED STYLE
1056 |    */
1057 | 
1058 |   .container { max-width: 1140px; }
1059 | 
1060 |   .section-text { margin-block-end: 60px; }
1061 | 
1062 | 
1063 | 
1064 |   /**
1065 |    * HERO
1066 |    */
1067 | 
1068 |   .hero { padding-block-start: 250px; }
1069 | 
1070 |   .hero-banner-bg { transform: scale(1.2); }
1071 | 
1072 |   .hero-banner .w-100 {
1073 |     max-width: max-content;
1074 |     margin-inline: auto;
1075 |   }
1076 | 
1077 | 
1078 | 
1079 |   /**
1080 |    * UPCOMING
1081 |    */
1082 | 
1083 |   .upcoming-card .card-banner {
1084 |     max-height: 180px;
1085 |     width: auto;
1086 |   }
1087 | 
1088 |   .upcoming-card .card-meta { bottom: 0; }
1089 | 
1090 |   .upcoming-card.right .card-meta { left: 35%; }
1091 | 
1092 |   .upcoming-time .time { --fontSize-1: 6.2rem; }
1093 | 
1094 | 
1095 | 
1096 |   /**
1097 |    * FOOTER
1098 |    */
1099 | 
1100 |   .footer-top .container { grid-template-columns: 1f 0.5fr 0.5fr 1fr; }
1101 | 
1102 |   .footer .logo img { width: 205px; }
1103 | 
1104 | }


--------------------------------------------------------------------------------
/assets/images/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/Thumbs.db


--------------------------------------------------------------------------------
/assets/images/body-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/body-bg.jpg


--------------------------------------------------------------------------------
/assets/images/hero-banner-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/hero-banner-bg.png


--------------------------------------------------------------------------------
/assets/images/hero-banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/hero-banner.png


--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/logo.png


--------------------------------------------------------------------------------
/assets/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="215" height="100" viewBox="0 0 215 100" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_33_11)">
 3 | <path d="M34.0365 16.1755L31.5728 10.2447L37.8922 11.3888C43.9679 12.4888 50.9975 15.846 56.045 21.1866C59.5373 15.8693 63.7559 11.0646 68.9047 6.93937L74.2349 11.2135C72.5523 14.6402 71.7886 17.3758 71.4993 20.4812C76.1492 18.9636 81.9748 18.0602 89.0386 18.4817L99.5359 19.1082L90.7569 24.8974C88.9177 26.1102 87.2995 27.2884 85.8878 28.4449C91.445 28.4366 97.4172 29.6643 104.388 32.1943L113.029 35.3309L104.49 38.7355C100.442 40.3494 97.59 42.3364 94.7482 44.9929C100.532 46.8621 105.948 50.0447 109.873 53.4557L116.821 59.4935L107.617 59.5973C102.804 59.6516 97.1356 59.786 92.2097 60.4371C94.3833 64.0995 95.8385 68.2546 96.6157 72.853L98.3349 83.0249L90.781 75.9992C85.3319 70.9311 78.5345 67.0815 70.2602 64.4911L66.6243 63.3528C63.7159 64.8435 60.8689 66.6075 58.0805 68.571L59.0603 69.4226L57.1458 69.2381C51.3024 73.4644 45.7168 78.5385 40.3617 83.772L39.0167 85.0865L37.1782 84.6903C34.4491 84.1023 32.0457 83.5097 29.8573 82.8234L28.6507 82.445L27.9646 81.3828L25.4638 77.511L25.3 77.2575L23.9085 77.1329L16.5553 76.475L15.7656 76.4044L15.0834 76.0003C14.1961 75.4746 13.2285 74.8917 12.215 74.281C11.2921 73.725 10.331 73.1459 9.35757 72.5662L5.89371 70.5033L8.42266 67.3636C13.7686 60.7265 19.8791 55.4888 25.3944 50.7613C26.436 49.8685 27.4563 48.9939 28.4463 48.1315C30.4441 41.0261 34.4674 34.8851 39.9193 30.2667C37.9551 25.5759 35.9909 20.8804 34.0365 16.1755Z" stroke="#9841FF" stroke-width="7"/>
 4 | <path d="M108.8 34.85V22H113.15V35.05C113.15 35.2333 113.242 35.325 113.425 35.325H118.075C118.258 35.325 118.35 35.2333 118.35 35.05V22H122.7V34.85C122.7 37.7833 121.233 39.25 118.3 39.25H113.2C110.267 39.25 108.8 37.7833 108.8 34.85Z" fill="white"/>
 5 | <path d="M126.455 39.25V22H131.155L136.88 32V22H141.23V39.25H136.555L130.805 29.25V39.25H126.455Z" fill="white"/>
 6 | <path d="M145.132 39.25V22H149.482V39.25H145.132Z" fill="white"/>
 7 | <path d="M153.134 34.85V26.4C153.134 23.4667 154.6 22 157.534 22H164.584L166.534 23.5V25.925H157.759C157.575 25.925 157.484 26.0167 157.484 26.2V35.05C157.484 35.2333 157.575 35.325 157.759 35.325H162.684V32.425H159.859V28.5H167.034V39.25H157.534C154.6 39.25 153.134 37.7833 153.134 34.85Z" fill="white"/>
 8 | <path d="M170.425 39.25V22H174.775V39.25H170.425Z" fill="white"/>
 9 | <path d="M178.677 39.25V22H183.377L189.102 32V22H193.452V39.25H188.777L183.027 29.25V39.25H178.677Z" fill="white"/>
10 | <path d="M197.353 39.25V22H209.428V25.925H201.703V28.5H208.678V32.425H201.703V35.325H209.428V39.25H197.353Z" fill="white"/>
11 | <path d="M84.8719 70.4902V66.7072H97.0009C97.2869 66.7072 97.4299 66.5642 97.4299 66.2782V63.6262C97.4299 63.2622 97.2739 63.0542 96.9619 63.0022L89.7469 61.5202C86.4969 60.8962 84.8719 58.7252 84.8719 55.0072V52.7842C84.8719 48.2082 87.1599 45.9202 91.7359 45.9202H100.394L103.436 48.2602V52.0432H92.0869C91.8009 52.0432 91.6579 52.1862 91.6579 52.4722V54.9682C91.6579 55.3062 91.8139 55.5142 92.1259 55.5922L99.341 56.9962C102.591 57.6722 104.216 59.8562 104.216 63.5482V65.9662C104.216 70.5422 101.928 72.8302 97.3519 72.8302H87.9139L84.8719 70.4902Z" fill="white"/>
12 | <path d="M108.732 65.9662V52.7842C108.732 48.2082 111.02 45.9202 115.596 45.9202H124.332C128.908 45.9202 131.196 48.2082 131.196 52.7842V65.9662C131.196 69.5022 129.844 71.6602 127.14 72.4402L129.636 77.3152L128.856 78.6802H122.967L120.003 72.8302H115.596C111.02 72.8302 108.732 70.5422 108.732 65.9662ZM115.518 66.2782C115.518 66.5642 115.661 66.7072 115.947 66.7072H123.981C124.267 66.7072 124.41 66.5642 124.41 66.2782V52.4722C124.41 52.1862 124.267 52.0432 123.981 52.0432H115.947C115.661 52.0432 115.518 52.1862 115.518 52.4722V66.2782Z" fill="white"/>
13 | <path d="M136.653 65.9662V45.9202H143.439V66.2782C143.439 66.5642 143.582 66.7072 143.868 66.7072H151.122C151.408 66.7072 151.551 66.5642 151.551 66.2782V45.9202H158.337V65.9662C158.337 70.5422 156.049 72.8302 151.473 72.8302H143.517C138.941 72.8302 136.653 70.5422 136.653 65.9662Z" fill="white"/>
14 | <path d="M161.815 71.5822L169.42 45.9202H179.56L187.165 71.5822L186.346 72.8302H180.652L179.326 68.0332H169.654L168.328 72.8302H162.634L161.815 71.5822ZM171.448 61.9102H177.532L174.724 52.0432H174.256L171.448 61.9102Z" fill="white"/>
15 | <path d="M190.854 72.8302V45.9202H200.916C208.664 45.9202 212.538 49.7942 212.538 57.5422V61.2082C212.538 68.9562 208.664 72.8302 200.916 72.8302H190.854ZM197.64 66.7072H201.306C204.27 66.7072 205.752 65.2122 205.752 62.2222V56.5282C205.752 53.5382 204.27 52.0432 201.306 52.0432H197.64V66.7072Z" fill="white"/>
16 | </g>
17 | <defs>
18 | <clipPath id="clip0_33_11">
19 | <rect width="215" height="100" fill="white"/>
20 | </clipPath>
21 | </defs>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/assets/images/news-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/news-1.jpg


--------------------------------------------------------------------------------
/assets/images/news-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/news-2.jpg


--------------------------------------------------------------------------------
/assets/images/news-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/news-3.jpg


--------------------------------------------------------------------------------
/assets/images/team-logo-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/team-logo-1.png


--------------------------------------------------------------------------------
/assets/images/team-logo-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/team-logo-2.png


--------------------------------------------------------------------------------
/assets/images/team-logo-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/team-logo-3.png


--------------------------------------------------------------------------------
/assets/images/team-logo-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/team-logo-4.png


--------------------------------------------------------------------------------
/assets/images/team-logo-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/team-logo-5.png


--------------------------------------------------------------------------------
/assets/images/team-logo-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/assets/images/team-logo-6.png


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | 
  4 | 
  5 | /**
  6 |  * add event on multiple elements
  7 |  */
  8 | 
  9 | const addEventOnElements = function (elements, eventType, callback) {
 10 |   for (let i = 0, len = elements.length; i < len; i++) {
 11 |     elements[i].addEventListener(eventType, callback);
 12 |   }
 13 | }
 14 | 
 15 | 
 16 | 
 17 | /**
 18 |  * MOBILE NAVBAR
 19 |  * navbar will show after clicking menu button
 20 |  */
 21 | 
 22 | const navbar = document.querySelector("[data-navbar]");
 23 | const navToggler = document.querySelector("[data-nav-toggler]");
 24 | const navLinks = document.querySelectorAll("[data-nav-link]");
 25 | 
 26 | const toggleNav = function () {
 27 |   navbar.classList.toggle("active");
 28 |   this.classList.toggle("active");
 29 | }
 30 | 
 31 | navToggler.addEventListener("click", toggleNav);
 32 | 
 33 | const navClose = () => {
 34 |   navbar.classList.remove("active");
 35 |   navToggler.classList.remove("active");
 36 | }
 37 | 
 38 | addEventOnElements(navLinks, "click", navClose);
 39 | 
 40 | 
 41 | 
 42 | /**
 43 |  * HEADER and BACK TOP BTN
 44 |  * header and back top btn will be active after scrolled down to 100px of screen
 45 |  */
 46 | 
 47 | const header = document.querySelector("[data-header]");
 48 | const backTopBtn = document.querySelector("[data-back-top-btn]");
 49 | 
 50 | const activeEl = function () {
 51 |   if (window.scrollY > 100) {
 52 |     header.classList.add("active");
 53 |     backTopBtn.classList.add("active");
 54 |   } else {
 55 |     header.classList.remove("active");
 56 |     backTopBtn.classList.remove("active");
 57 |   }
 58 | }
 59 | 
 60 | window.addEventListener("scroll", activeEl);
 61 | 
 62 | 
 63 | 
 64 | /**
 65 |  * Button hover ripple effect
 66 |  */
 67 | 
 68 | const buttons = document.querySelectorAll("[data-btn]");
 69 | 
 70 | const buttonHoverRipple = function (event) {
 71 |   this.style.setProperty("--top", `${event.offsetY}px`);
 72 |   this.style.setProperty("--left", `${event.offsetX}px`);
 73 | }
 74 | 
 75 | addEventOnElements(buttons, "mousemove", buttonHoverRipple);
 76 | 
 77 | 
 78 | 
 79 | /**
 80 |  * Scroll reveal
 81 |  */
 82 | 
 83 | const revealElements = document.querySelectorAll("[data-reveal]");
 84 | 
 85 | const revealElementOnScroll = function () {
 86 |   for (let i = 0, len = revealElements.length; i < len; i++) {
 87 |     const isElementInsideWindow = revealElements[i].getBoundingClientRect().top < window.innerHeight / 1.1;
 88 | 
 89 |     if (isElementInsideWindow) {
 90 |       revealElements[i].classList.add("revealed");
 91 |     }
 92 |   }
 93 | }
 94 | 
 95 | window.addEventListener("scroll", revealElementOnScroll);
 96 | 
 97 | window.addEventListener("load", revealElementOnScroll);
 98 | 
 99 | 
100 | 
101 | /**
102 |  * Custom cursor
103 |  */
104 | 
105 | const cursor = document.querySelector("[data-cursor]");
106 | const hoverElements = [...document.querySelectorAll("a"), ...document.querySelectorAll("button")];
107 | 
108 | const cursorMove = function (event) {
109 |   cursor.style.top = `${event.clientY}px`;
110 |   cursor.style.left = `${event.clientX}px`;
111 | }
112 | 
113 | window.addEventListener("mousemove", cursorMove);
114 | 
115 | addEventOnElements(hoverElements, "mouseover", function () {
116 |   cursor.classList.add("hovered");
117 | });
118 | 
119 | addEventOnElements(hoverElements, "mouseout", function () {
120 |   cursor.classList.remove("hovered");
121 | });


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="127" height="89" viewBox="0 0 127 89" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M34.0365 12.1755L31.5728 6.24473L37.8922 7.38881C43.9679 8.48878 50.9975 11.846 56.045 17.1866C59.5373 11.8693 63.7559 7.06457 68.9047 2.93937L74.2349 7.21346C72.5523 10.6402 71.7886 13.3758 71.4993 16.4812C76.1492 14.9636 81.9748 14.0602 89.0386 14.4817L99.5359 15.1082L90.7569 20.8974C88.9177 22.1102 87.2995 23.2884 85.8878 24.4449C91.445 24.4366 97.4172 25.6643 104.388 28.1943L113.029 31.3309L104.49 34.7355C100.442 36.3494 97.59 38.3364 94.7482 40.9929C100.532 42.8621 105.948 46.0447 109.873 49.4557L116.821 55.4935L107.617 55.5973C102.804 55.6516 97.1356 55.786 92.2097 56.4371C94.3832 60.0995 95.8385 64.2546 96.6157 68.853L98.3349 79.0249L90.781 71.9992C85.3319 66.9311 78.5345 63.0815 70.2602 60.4911L66.6243 59.3528C63.7159 60.8435 60.8689 62.6075 58.0805 64.571L59.0603 65.4226L57.1458 65.2381C51.3024 69.4644 45.7168 74.5385 40.3617 79.772L39.0167 81.0865L37.1782 80.6903C34.4491 80.1023 32.0457 79.5097 29.8573 78.8234L28.6507 78.445L27.9646 77.3828L25.4638 73.511L25.3 73.2575L23.9085 73.1329L16.5553 72.475L15.7656 72.4044L15.0834 72.0003C14.196 71.4746 13.2283 70.8916 12.2147 70.2808C11.2918 69.7248 10.3308 69.1458 9.35757 68.5662L5.89371 66.5033L8.42267 63.3636C13.7686 56.7265 19.8791 51.4888 25.3944 46.7613C26.436 45.8685 27.4563 44.9939 28.4463 44.1315C30.4441 37.0261 34.4674 30.8851 39.9193 26.2667C37.9551 21.5759 35.9909 16.8804 34.0365 12.1755Z" stroke="#9841FF" stroke-width="7"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/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 | 
  9 |   <!-- 
 10 |     - primary meta tags
 11 |   -->
 12 |   <title>GameHive - Epic Games Made For True Gamers!</title>
 13 |   <meta name="title" content="Unigine - Epic Games Made For True Gamers!">
 14 |   <meta name="description" content="This is an esports and gaming html template made by codewithsadee">
 15 | 
 16 |   <!-- 
 17 |     - favicon
 18 |   -->
 19 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
 20 | 
 21 |   <!-- 
 22 |     - google font link
 23 |   -->
 24 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 25 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 26 |   <link
 27 |     href="https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700&family=Work+Sans:wght@600&display=swap"
 28 |     rel="stylesheet">
 29 | 
 30 |   <!-- 
 31 |     - custom css link
 32 |   -->
 33 |   <link rel="stylesheet" href="./assets/css/style.css">
 34 | 
 35 |   <!-- 
 36 |     - preload images
 37 |   -->
 38 |   <link rel="preload" as="image" href="./assets/images/hero-banner.png">
 39 |   <link rel="preload" as="image" href="./assets/images/hero-banner-bg.png">
 40 | 
 41 | </head>
 42 | 
 43 | <body id="top">
 44 | 
 45 |   <!-- 
 46 |     - #HEADER
 47 |   -->
 48 | 
 49 |   <header class="header active" data-header>
 50 |     <div class="container">
 51 | 
 52 |       <a href="#" class="logo">
 53 |         <img src="./assets/images/logo.svg" width="110" height="53" alt="unigine home">
 54 |       </a>
 55 | 
 56 |       <nav class="navbar" data-navbar>
 57 |         <ul class="navbar-list">
 58 | 
 59 |           <li class="navbar-item">
 60 |             <a href="#home" class="navbar-link" data-nav-link>home</a>
 61 |           </li>
 62 | 
 63 |           <li class="navbar-item">
 64 |             <a href="#tournament" class="navbar-link" data-nav-link>tournament</a>
 65 |           </li>
 66 | 
 67 |           <li class="navbar-item">
 68 |             <a href="#news" class="navbar-link" data-nav-link>news</a>
 69 |           </li>
 70 | 
 71 |           <li class="navbar-item">
 72 |             <a href="#" class="navbar-link" data-nav-link>contact</a>
 73 |           </li>
 74 | 
 75 |         </ul>
 76 |       </nav>
 77 | 
 78 |       <a href="#" class="btn" data-btn>join our team</a>
 79 | 
 80 |       <button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
 81 |         <span class="line line-1"></span>
 82 |         <span class="line line-2"></span>
 83 |         <span class="line line-3"></span>
 84 |       </button>
 85 | 
 86 |     </div>
 87 |   </header>
 88 | 
 89 | 
 90 | 
 91 | 
 92 | 
 93 |   <main>
 94 |     <article>
 95 | 
 96 |       <!-- 
 97 |         - #HERO
 98 |       -->
 99 | 
100 |       <div class="hero has-before" id="home">
101 |         <div class="container">
102 | 
103 |           <p class="section-subtitle">Enjoy The Games</p>
104 | 
105 |           <h1 class="h1 title hero-title">Epic Games Made For <br> True Gamers!</h1>
106 | 
107 |           <a href="#" class="btn" data-btn>Join With Us</a>
108 | 
109 |           <div class="hero-banner">
110 |             <img src="./assets/images/hero-banner.png" width="850" height="414" alt="hero banner" class="w-100">
111 | 
112 |             <img src="./assets/images/hero-banner-bg.png" alt="" class="hero-banner-bg">
113 |           </div>
114 | 
115 |         </div>
116 |       </div>
117 | 
118 | 
119 | 
120 | 
121 | 
122 |       <!-- 
123 |         - #UPCOMING
124 |       -->
125 | 
126 |       <section class="section upcoming" aria-labelledby="upcoming-label" id="tournament">
127 |         <div class="container">
128 | 
129 |           <p class="section-subtitle" id="upcoming-label" data-reveal="bottom">
130 |             Upcoming Matches
131 |           </p>
132 | 
133 |           <h2 class="h2 section-title" data-reveal="bottom">
134 |             Battles Extreme <br> Masters <span class="span">Tournament</span>
135 |           </h2>
136 | 
137 |           <p class="section-text" data-reveal="bottom">
138 |             Our success in creating business solutions is due in large part to our talented and highly committed team.
139 |           </p>
140 | 
141 |           <ol class="upcoming-list">
142 | 
143 |             <li class="upcoming-item">
144 | 
145 |               <div class="upcoming-card left has-before" data-reveal="left">
146 | 
147 |                 <img src="./assets/images/team-logo-1.png" width="86" height="81" loading="lazy"
148 |                   alt="Purple Death Cadets" class="card-banner">
149 | 
150 |                 <h3 class="h3 card-title">Purple Death Cadets</h3>
151 | 
152 |                 <div class="card-meta">Group 04 | Match 06th</div>
153 | 
154 |               </div>
155 | 
156 |               <div class="upcoming-time" data-reveal="bottom">
157 |                 <time class="time" datetime="10:00">10:00</time>
158 | 
159 |                 <time class="date" datetime="2022-05-25">25TH May 2024</time>
160 | 
161 |                 <div class="social-wrapper">
162 |                   <a href="#" class="social-link">
163 |                     <ion-icon name="logo-youtube"></ion-icon>
164 |                   </a>
165 | 
166 |                   <a href="#" class="social-link">
167 |                     <ion-icon name="logo-twitch"></ion-icon>
168 |                   </a>
169 |                 </div>
170 |               </div>
171 | 
172 |               <div class="upcoming-card right has-before" data-reveal="right">
173 | 
174 |                 <img src="./assets/images/team-logo-2.png" width="86" height="81" loading="lazy"
175 |                   alt="Trigger Brain Squad" class="card-banner">
176 | 
177 |                 <h3 class="h3 card-title">Trigger Brain Squad</h3>
178 | 
179 |                 <div class="card-meta">Group 04 | Match 06th</div>
180 | 
181 |               </div>
182 | 
183 |             </li>
184 | 
185 |             <li class="upcoming-item">
186 | 
187 |               <div class="upcoming-card left has-before" data-reveal="left">
188 | 
189 |                 <img src="./assets/images/team-logo-3.png" width="86" height="81" loading="lazy"
190 |                   alt="The Black Hat Hackers" class="card-banner">
191 | 
192 |                 <h3 class="h3 card-title">The Black Hat Hackers</h3>
193 | 
194 |                 <div class="card-meta">Group 05 | Match 02nd</div>
195 | 
196 |               </div>
197 | 
198 |               <div class="upcoming-time" data-reveal="bottom">
199 |                 <time class="time" datetime="12:30">12:30</time>
200 | 
201 |                 <time class="date" datetime="2024-01-10">10TH Jan 2024</time>
202 | 
203 |                 <div class="social-wrapper">
204 |                   <a href="#" class="social-link">
205 |                     <ion-icon name="logo-youtube"></ion-icon>
206 |                   </a>
207 | 
208 |                   <a href="#" class="social-link">
209 |                     <ion-icon name="logo-twitch"></ion-icon>
210 |                   </a>
211 |                 </div>
212 |               </div>
213 | 
214 |               <div class="upcoming-card right has-before" data-reveal="right">
215 | 
216 |                 <img src="./assets/images/team-logo-4.png" width="86" height="81" loading="lazy"
217 |                   alt="Your Worst Nightmare" class="card-banner">
218 | 
219 |                 <h3 class="h3 card-title">Your Worst Nightmare</h3>
220 | 
221 |                 <div class="card-meta">Group 05 | Match 02nd</div>
222 | 
223 |               </div>
224 | 
225 |             </li>
226 | 
227 |             <li class="upcoming-item">
228 | 
229 |               <div class="upcoming-card left has-before" data-reveal="left">
230 | 
231 |                 <img src="./assets/images/team-logo-5.png" width="86" height="81" loading="lazy"
232 |                   alt="Witches And Quizards" class="card-banner">
233 | 
234 |                 <h3 class="h3 card-title">Witches And Quizards</h3>
235 | 
236 |                 <div class="card-meta">Group 02 | Match 03rd</div>
237 | 
238 |               </div>
239 | 
240 |               <div class="upcoming-time" data-reveal="bottom">
241 |                 <time class="time" datetime="04:20">04:20</time>
242 | 
243 |                 <time class="date" datetime="2024-12-15">15th Dec 2024</time>
244 | 
245 |                 <div class="social-wrapper">
246 |                   <a href="#" class="social-link">
247 |                     <ion-icon name="logo-youtube"></ion-icon>
248 |                   </a>
249 | 
250 |                   <a href="#" class="social-link">
251 |                     <ion-icon name="logo-twitch"></ion-icon>
252 |                   </a>
253 |                 </div>
254 |               </div>
255 | 
256 |               <div class="upcoming-card right has-before" data-reveal="right">
257 | 
258 |                 <img src="./assets/images/team-logo-6.png" width="86" height="81" loading="lazy"
259 |                   alt="Resting Bitch Faces" class="card-banner">
260 | 
261 |                 <h3 class="h3 card-title">Resting Bitch Faces</h3>
262 | 
263 |                 <div class="card-meta">Group 02 | Match 03rd</div>
264 | 
265 |               </div>
266 | 
267 |             </li>
268 | 
269 |           </ol>
270 | 
271 |         </div>
272 |       </section>
273 | 
274 | 
275 | 
276 | 
277 | 
278 |       <!-- 
279 |         - #NEWS
280 |       -->
281 | 
282 |       <section class="section news" aria-label="our latest news" id="news">
283 |         <div class="container">
284 | 
285 |           <p class="section-subtitle" data-reveal="bottom">What's On Our Mind</p>
286 | 
287 |           <h2 class="h2 section-title" data-reveal="bottom">
288 |             News And <span class="span">Headlines</span>
289 |           </h2>
290 | 
291 |           <p class="section-text" data-reveal="bottom">
292 |             Our success in creating business solutions is due in large part to our talented and highly committed team.
293 |           </p>
294 | 
295 |           <ul class="news-list">
296 | 
297 |             <li data-reveal="bottom">
298 |               <div class="news-card">
299 | 
300 |                 <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
301 |                   <img src="./assets/images/news-1.jpg" width="600" height="400" loading="lazy"
302 |                     alt="Innovative Business All Over The World." class="img-cover">
303 |                 </figure>
304 | 
305 |                 <div class="card-content">
306 | 
307 |                   <a href="#" class="card-tag">Business</a>
308 | 
309 |                   <ul class="card-meta-list">
310 | 
311 |                     <li class="card-meta-item">
312 |                       <ion-icon name="calendar-outline" aria-hidden="true"></ion-icon>
313 | 
314 |                       <time class="card-meta-text" datetime="2022-01-01">Jan 01 2022</time>
315 |                     </li>
316 | 
317 |                     <li class="card-meta-item">
318 |                       <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
319 | 
320 |                       <p class="card-meta-text">Elliot Alderson</p>
321 |                     </li>
322 | 
323 |                   </ul>
324 | 
325 |                   <h3 class="h3">
326 |                     <a href="#" class="card-title">Innovative Business All Over The World.</a>
327 |                   </h3>
328 | 
329 |                   <p class="card-text">
330 |                     Financial experts support or help you to to find out which way you can raise your funds more...
331 |                   </p>
332 | 
333 |                   <a href="#" class="link has-before">Read More</a>
334 | 
335 |                 </div>
336 | 
337 |               </div>
338 |             </li>
339 | 
340 |             <li data-reveal="bottom">
341 |               <div class="news-card">
342 | 
343 |                 <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
344 |                   <img src="./assets/images/news-2.jpg" width="600" height="400" loading="lazy"
345 |                     alt="How To Start Initiating An Startup In Few Days." class="img-cover">
346 |                 </figure>
347 | 
348 |                 <div class="card-content">
349 | 
350 |                   <a href="#" class="card-tag">Startup</a>
351 | 
352 |                   <ul class="card-meta-list">
353 | 
354 |                     <li class="card-meta-item">
355 |                       <ion-icon name="calendar-outline" aria-hidden="true"></ion-icon>
356 | 
357 |                       <time class="card-meta-text" datetime="2022-01-01">Jan 01 2022</time>
358 |                     </li>
359 | 
360 |                     <li class="card-meta-item">
361 |                       <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
362 | 
363 |                       <p class="card-meta-text">Elliot Alderson</p>
364 |                     </li>
365 | 
366 |                   </ul>
367 | 
368 |                   <h3 class="h3">
369 |                     <a href="#" class="card-title">How To Start Initiating An Startup In Few Days.</a>
370 |                   </h3>
371 | 
372 |                   <p class="card-text">
373 |                     Financial experts support or help you to to find out which way you can raise your funds more...
374 |                   </p>
375 | 
376 |                   <a href="#" class="link has-before">Read More</a>
377 | 
378 |                 </div>
379 | 
380 |               </div>
381 |             </li>
382 | 
383 |             <li data-reveal="bottom">
384 |               <div class="news-card">
385 | 
386 |                 <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
387 |                   <img src="./assets/images/news-3.jpg" width="600" height="400" loading="lazy"
388 |                     alt="Financial Experts Support Help You To Find Out." class="img-cover">
389 |                 </figure>
390 | 
391 |                 <div class="card-content">
392 | 
393 |                   <a href="#" class="card-tag">Finance</a>
394 | 
395 |                   <ul class="card-meta-list">
396 | 
397 |                     <li class="card-meta-item">
398 |                       <ion-icon name="calendar-outline" aria-hidden="true"></ion-icon>
399 | 
400 |                       <time class="card-meta-text" datetime="2022-01-01">Jan 01 2022</time>
401 |                     </li>
402 | 
403 |                     <li class="card-meta-item">
404 |                       <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
405 | 
406 |                       <p class="card-meta-text">Elliot Alderson</p>
407 |                     </li>
408 | 
409 |                   </ul>
410 | 
411 |                   <h3 class="h3">
412 |                     <a href="#" class="card-title">Financial Experts Support Help You To Find Out.</a>
413 |                   </h3>
414 | 
415 |                   <p class="card-text">
416 |                     Financial experts support or help you to to find out which way you can raise your funds more...
417 |                   </p>
418 | 
419 |                   <a href="#" class="link has-before">Read More</a>
420 | 
421 |                 </div>
422 | 
423 |               </div>
424 |             </li>
425 | 
426 |           </ul>
427 | 
428 |         </div>
429 |       </section>
430 | 
431 |     </article>
432 |   </main>
433 | 
434 | 
435 | 
436 | 
437 | 
438 |   <!-- 
439 |     - #FOOTER
440 |   -->
441 | 
442 |   <footer class="footer">
443 | 
444 |     <div class="section footer-top">
445 |       <div class="container">
446 | 
447 |         <div class="footer-brand">
448 | 
449 |           <a href="#" class="logo">
450 |             <img src="./assets/images/logo.svg" width="150" height="73" loading="lazy" alt="Unigine logo">
451 |           </a>
452 | 
453 |           <p class="footer-text">
454 |             Our success in creating business solutions is due in large part to our talented and highly committed team.
455 |           </p>
456 | 
457 |           <ul class="social-list">
458 | 
459 |             <li>
460 |               <a href="#" class="social-link">
461 |                 <ion-icon name="logo-facebook"></ion-icon>
462 |               </a>
463 |             </li>
464 | 
465 |             <li>
466 |               <a href="#" class="social-link">
467 |                 <ion-icon name="logo-twitter"></ion-icon>
468 |               </a>
469 |             </li>
470 | 
471 |             <li>
472 |               <a href="https://www.insatgram.com/coding.stella" target=_blank class="social-link">
473 |                 <ion-icon name="logo-instagram"></ion-icon>
474 |               </a>
475 |             </li>
476 | 
477 |             <li>
478 |               <a href="#" class="social-link">
479 |                 <ion-icon name="logo-youtube"></ion-icon>
480 |               </a>
481 |             </li>
482 | 
483 |           </ul>
484 | 
485 |         </div>
486 | 
487 |         <div class="footer-list">
488 | 
489 |           <p class="title footer-list-title has-after">Usefull Links</p>
490 | 
491 |           <ul>
492 | 
493 |             <li>
494 |               <a href="#" class="footer-link">Tournaments</a>
495 |             </li>
496 | 
497 |             <li>
498 |               <a href="#" class="footer-link">Help Center</a>
499 |             </li>
500 | 
501 |             <li>
502 |               <a href="#" class="footer-link">Privacy and Policy</a>
503 |             </li>
504 | 
505 |             <li>
506 |               <a href="#" class="footer-link">Terms of Use</a>
507 |             </li>
508 | 
509 |             <li>
510 |               <a href="#" class="footer-link">Contact Us</a>
511 |             </li>
512 | 
513 |           </ul>
514 | 
515 |         </div>
516 | 
517 |         <div class="footer-list">
518 | 
519 |           <p class="title footer-list-title has-after">Contact Us</p>
520 | 
521 |           <div class="contact-item">
522 |             <span class="span">Location:</span>
523 | 
524 |             <address class="contact-link">
525 |               153 Williamson Plaza, Maggieberg, MT 09514
526 |             </address>
527 |           </div>
528 | 
529 |           <div class="contact-item">
530 |             <span class="span">Join Us:</span>
531 | 
532 |             <a href="mailto:Info@gamehive.com" class="contact-link">Info@gamehive.com</a>
533 |           </div>
534 | 
535 |           <div class="contact-item">
536 |             <span class="span">Phone:</span>
537 | 
538 |             <a href="tel:+12345678910" class="contact-link">+1 (234) 567-8910</a>
539 |           </div>
540 | 
541 |         </div>
542 | 
543 |         <div class="footer-list">
544 | 
545 |           <p class="title footer-list-title has-after">Newsletter Signup</p>
546 | 
547 |           <form action="./index.html" method="get" class="footer-form">
548 |             <input type="email" name="email_address" required placeholder="Your Email" autocomplete="off"
549 |               class="input-field">
550 | 
551 |             <button type="submit" class="btn" data-btn>Subscribe Now</button>
552 |           </form>
553 | 
554 |         </div>
555 | 
556 |       </div>
557 |     </div>
558 | 
559 |     <div class="footer-bottom">
560 |       <div class="container">
561 | 
562 |         <p class="copyright">
563 |           &copy; 2023 coding.stella All Rights Reserved.
564 |         </p>
565 | 
566 |       </div>
567 |     </div>
568 | 
569 |   </footer>
570 | 
571 | 
572 | 
573 | 
574 | 
575 |   <!-- 
576 |     - #BACK TO TOP
577 |   -->
578 | 
579 |   <a href="#top" class="back-top-btn" aria-label="back to top" data-back-top-btn>
580 |     <ion-icon name="arrow-up-outline" aria-hidden="true"></ion-icon>
581 |   </a>
582 | 
583 | 
584 | 
585 | 
586 | 
587 |   <!-- 
588 |     - #CUSTOM CURSOR
589 |   -->
590 | 
591 |   <div class="cursor" data-cursor></div>
592 | 
593 | 
594 | 
595 | 
596 | 
597 |   <!-- 
598 |     - custom js link
599 |   -->
600 |   <script src="./assets/js/script.js"></script>
601 | 
602 |   <!-- 
603 |     - ionicon link
604 |   -->
605 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
606 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
607 | 
608 | </body>
609 | 
610 | </html>
611 | 


--------------------------------------------------------------------------------
/index.txt:
--------------------------------------------------------------------------------
  1 | Unigine - Epic Games Made For True Gamers!
  2 | 
  3 | This is an esports and gaming html template made by codewithsadee
  4 | 
  5 | 
  6 | 
  7 | #---------- HEADER ----------#
  8 | 
  9 | alt = unigine home
 10 | 
 11 | home
 12 | tournament
 13 | news
 14 | contact
 15 | 
 16 | join our team
 17 | 
 18 | aria-label = toggle menu
 19 | 
 20 | 
 21 | 
 22 | #---------- HERO ----------#
 23 | 
 24 | Enjoy The Games
 25 | Epic Games Made For True Gamers!
 26 | 
 27 | Join With Us
 28 | 
 29 | alt = hero banner
 30 | alt = shape
 31 | 
 32 | 
 33 | 
 34 | #---------- UPCOMING ----------#
 35 | 
 36 | Upcoming Matches
 37 | 
 38 | Battles Extreme Masters Tournament
 39 | 
 40 | Our success in creating business solutions is due in large part to our talented and highly committed team.
 41 | 
 42 | 1.
 43 | alt = Purple Death Cadets
 44 | Purple Death Cadets
 45 | Group 04 | Match 06th
 46 | 
 47 | 10:00
 48 | 25TH May 2024
 49 | 
 50 | <ion-icon name="logo-youtube"></ion-icon>
 51 | <ion-icon name="logo-twitch"></ion-icon>
 52 | 
 53 | alt = Trigger Brain Squad
 54 | Trigger Brain Squad
 55 | 
 56 | 2.
 57 | alt = The Black Hat Hackers
 58 | The Black Hat Hackers
 59 | 
 60 | 12:30
 61 | 10TH Jan 2024
 62 | 
 63 | alt = Your Worst Nightmare
 64 | Your Worst Nightmare
 65 | Group 05 | Match 02nd
 66 | 
 67 | 3.
 68 | alt = Witches And Quizards
 69 | Witches And Quizards
 70 | Group 02 | Match 03rd
 71 | 
 72 | 04:20
 73 | 15th Dec 2024
 74 | 
 75 | alt = Resting Bitch Faces
 76 | Resting Bitch Faces
 77 | Group 02 | Match 03rd
 78 | 
 79 | 
 80 | 
 81 | #---------- NEWS ----------#
 82 | 
 83 | What's On Our Mind
 84 | 
 85 | News And Headlines
 86 | 
 87 | Our success in creating business solutions is due in large part to our talented and highly committed team.
 88 | 
 89 | alt = Innovative Business All Over The World.
 90 | Business
 91 | 
 92 | <ion-icon name="calendar-outline" aria-hidden="true"></ion-icon>
 93 | Jan 01 2022
 94 | 
 95 | <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
 96 | Elliot Alderson
 97 | 
 98 | Innovative Business All Over The World.
 99 | 
100 | Financial experts support or help you to to find out which way you can raise your funds more...
101 | 
102 | Read More
103 | 
104 | Startup
105 | 
106 | How To Start Initiating An Startup In Few Days.
107 | 
108 | Finance
109 | 
110 | Financial Experts Support Help You To Find Out.
111 | 
112 | 
113 | 
114 | #---------- FOOTER ----------#
115 | 
116 | alt = Unigine logo
117 | 
118 | Our success in creating business solutions is due in large part to our talented and highly committed team.
119 | 
120 | <ion-icon name="logo-facebook"></ion-icon>
121 | <ion-icon name="logo-twitter"></ion-icon>
122 | <ion-icon name="logo-instagram"></ion-icon>
123 | <ion-icon name="logo-youtube"></ion-icon>
124 | 
125 | Usefull Links
126 | 
127 | Tournaments
128 | Help Center
129 | Privacy and Policy
130 | Terms of Use
131 | Contact Us
132 | 
133 | Contact Us
134 | 
135 | Location:
136 | 153 Williamson Plaza, Maggieberg, MT 09514
137 | 
138 | Join Us:
139 | Info@unigine.com
140 | 
141 | Phone:
142 | +1 (234) 567-8910
143 | 
144 | Newsletter Signup
145 | 
146 | Your Email
147 | Subscribe Now
148 | &copy; 2022 codewithsadee All Rights Reserved.
149 | 
150 | 
151 | 
152 | #---------- BACK TO TOP ----------#
153 | 
154 | aria-label = back to top
155 | <ion-icon name="arrow-up-outline" aria-hidden="true"></ion-icon>


--------------------------------------------------------------------------------
/readme-images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingstella/Gaming-website/01b0aaba18053708f53ae9826c769e1ea6610dec/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@400;500;600;700&family=Work+Sans:wght@600&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 | ### Background color
 27 | 
 28 | ``` css
 29 | --bg-purple: hsla(267, 100%, 63%, 1);
 30 | --bg-purple-alpha-30: hsla(267, 100%, 63%, 0.3);
 31 | --bg-dark-purple: hsla(279, 42%, 9%, 1);
 32 | --bg-oxford-blue: hsla(240, 63%, 13%, 1);
 33 | --bg-oxford-blue-alpha-95: hsla(240, 63%, 13%, 0.95);
 34 | --bg-oxford-blue-alpha-90: hsla(240, 63%, 13%, 0.9);
 35 | --bg-oxford-blue-alpha-80: hsla(240, 63%, 13%, 0.8);
 36 | ```
 37 | 
 38 | ### Gradient color
 39 | 
 40 | ``` css
 41 | --gradient-1: linear-gradient(to right bottom, hsl(299, 100%, 52%), hsl(291, 100%, 58%), hsl(283, 100%, 60%), hsl(273, 100%, 62%), hsl(262, 100%, 63%), hsl(242, 100%, 69%), hsl(223, 100%, 62%), hsl(210, 100%, 50%), hsl(203, 100%, 50%), hsl(198, 100%, 50%), hsl(192, 100%, 48%), hsl(185, 90%, 48%));
 42 | --gradient-2: linear-gradient(90deg, transparent 0%, #9841ff 50%, transparent 100%);
 43 | ```
 44 | 
 45 | ### Text color
 46 | 
 47 | ``` css
 48 | --text-white: hsla(0, 0%, 100%, 1);
 49 | --text-gainsboro: hsla(0, 0%, 87%, 1);
 50 | --text-champagne-pink: hsla(23, 61%, 86%, 1);
 51 | --text-purple: hsla(267, 100%, 63%, 1);
 52 | ```
 53 | 
 54 | ### Border color
 55 | 
 56 | ``` css
 57 | --border-space-cadet: hsl(240, 45%, 17%);
 58 | --border-purple-alpha-30: hsla(267, 100%, 63%, 0.3);
 59 | ```
 60 | 
 61 | ## Typography
 62 | 
 63 | ``` css
 64 | --fontFamily-oxanium: 'Oxanium', cursive;
 65 | --fontFamily-work-sans: 'Work Sans', sans-serif;
 66 | 
 67 | --fontSize-1: 3.6rem;
 68 | --fontSize-2: 2.4rem;
 69 | --fontSize-3: 2rem;
 70 | --fontSize-4: 1.7rem;
 71 | --fontSize-5: 1.6rem;
 72 | --fontSize-6: 1.5rem;
 73 | --fontSize-7: 1.4rem;
 74 | --fontSize-8: 1.2rem;
 75 | 
 76 | --weight-regular: 400;
 77 | --weight-semiBold: 600;
 78 | --weight-bold: 700;
 79 | ```
 80 | 
 81 | ## Spacing
 82 | 
 83 | ``` css
 84 | --section-spacing: 60px;
 85 | ```
 86 | 
 87 | ## Shadow
 88 | 
 89 | ``` css
 90 | --shadow: 0px 2px 5px 0px hsla(0, 0%, 0%, 0.2);
 91 | ```
 92 | 
 93 | ## Border Radius
 94 | 
 95 | ``` css
 96 | --radius-circle: 50%;
 97 | --radius-5: 5px;
 98 | --radius-3: 3px;
 99 | ```
100 | 
101 | ## Clip path
102 | 
103 | ``` css
104 | --clip-path-1: polygon(0 0, 100% 0, 100% 0, 0 0);
105 | --clip-path-2: polygon(0 0, 100% 0, 100% 100%, 0 100%);
106 | --clip-path-3: polygon(0% 0%, 90% 0, 100% 30%, 100% 100%, 0 100%);
107 | --clip-path-4: polygon(90% 0, 100% 40%, 100% 100%, 0 100%, 0 0);
108 | --clip-path-5: polygon(100% 0, 100% 100%, 10% 100%, 0 60%, 0 0);
109 | --clip-path-6: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 40%);
110 | --clip-path-7: polygon(100% 0, 100% 60%, 90% 100%, 0 100%, 0 0);
111 | --clip-path-8: polygon(0% 0%, 70% 0, 100% 30%, 100% 100%, 0 100%);
112 | --clip-path-9: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
113 | ```
114 | 
115 | ## Transition
116 | 
117 | ``` css
118 | --transition-1: 250ms ease;
119 | --transition-2: 500ms ease;
120 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);
121 | ```
122 | 


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