From fe3ff4a4bce40eda4a679f08e1c71851c921069e Mon Sep 17 00:00:00 2001 From: "Akbar Mohammadi (Kalani)" <121675616+akbarmkalani@users.noreply.github.com> Date: Thu, 29 Jun 2023 20:15:54 +0330 Subject: [PATCH] Add files via upload --- assets/css/style.css | 836 +++++++++++++++++++++++++ assets/css/style.css.map | 1 + assets/css/style.scss | 1250 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 2087 insertions(+) create mode 100644 assets/css/style.css create mode 100644 assets/css/style.css.map create mode 100644 assets/css/style.scss diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..9c138bd --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,836 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300,700;1,500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@1,900&display=swap"); +* { + box-sizing: border-box; + font-family: "Roboto", sans-serif; +} +* li { + list-style-type: none; +} +* a { + text-decoration: none; +} + +main { + /* hamburgerIcon */ + /* *********************** */ + /* ******* */ + /* )******** */ + /* **** */ + /* style-five */ + /* ===================**************** */ + /* style-six===============*********** */ + /* style-sevent */ + /* ================************* style-eight */ + /* footer************+================== */ +} +main > header { + height: 50px; + background-color: #000 !important; +} +main > header > div:nth-of-type(1) { + height: 100%; +} +main > header > div:nth-of-type(1) > span { + height: 100%; +} +main > header > div:nth-of-type(1) > span > span { + background-color: #E8AE1A; + height: 100% !important; + width: 75px; + font-family: "Roboto", sans-serif; + -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); + clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); +} +main > header > div:nth-of-type(2) > section > a { + color: rgb(199, 197, 197); + transition: 0.4s; +} +main > header > div:nth-of-type(2) > section > a:hover { + color: #E8AE1A; +} +main > header > div:nth-of-type(2) > section > span { + position: relative; + color: rgb(199, 197, 197); +} +main > header > div:nth-of-type(2) > section > span::after { + content: ""; + display: flex; + width: 2px; + height: 100%; + background-color: #E8AE1A; + position: absolute; + left: 0; +} +main > header > div:nth-of-type(2) > section > span > i { + color: #E8AE1A; + margin-right: 9px; +} +main > .bg-mig { + width: 100%; + height: auto; + background-image: url("../img/img03.jpg"); +} +main > .bg-mig > nav { + /* **** */ + /* ***** */ +} +main > .bg-mig > nav > section { + padding-top: 9px; + background-color: rgba(21, 6, 39, 0.8549019608); +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(1) .active { + transform: skewX(-16deg); + background-color: #E8AE1A; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(1) .active > a { + color: #000 !important; + text-transform: uppercase; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(1) > li { + position: relative; + padding: 9px; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(1) > li::after { + content: ""; + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 100%; + width: 130%; + opacity: 0; + -webkit-clip-path: polygon(11% 0, 100% 0%, 87% 100%, 0% 100%); + clip-path: polygon(11% 0, 100% 0%, 87% 100%, 0% 100%); + background-color: #E8AE1A; + transition: 0.4s; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(1) > li:hover::after { + opacity: 1; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(1) > li > a { + color: #ccccd1; + transition: 0.4s; + z-index: 2; + text-transform: uppercase; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(1) > li > a:hover { + color: #000; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(2) > span:nth-of-type(1) { + margin-right: 20px; + color: #ccccd1; + position: relative; + font-size: 29px; + cursor: pointer; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(2) > span:nth-of-type(1)::after { + content: "0"; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + border-radius: 50%; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + top: 10px; + font-size: 13px; + right: 4px; + width: 20px; + height: 20px; + color: #1C0E23; + background-color: #E8AE1A; +} +main > .bg-mig > nav > section > div > ul > div:nth-of-type(2) > span:nth-of-type(2) { + cursor: pointer; + background-color: #1C0E23; + color: #E8AE1A; + box-shadow: 0 0 3px 1px #420303; +} +main > .bg-mig > nav > section > div .hamburgerIcon { + height: 100% !important; +} +main > .bg-mig > nav > section > div .hamburgerIcon > div > section { + width: 50px !important; +} +main > .bg-mig > nav > section > div .hamburgerIcon > div > section > span { + background-color: #e8e7eb; + width: 40px; + height: 4px; + margin: 5px; + transition: 0.4s; +} +main > .bg-mig > nav > section > div .hamburgerIcon > div > section > span:nth-of-type(1) { + transform-origin: top left; +} +main > .bg-mig > nav > section > div .hamburgerIcon > div > section > span:nth-of-type(3) { + transform-origin: bottom left; +} +main > .bg-mig > nav ._cart { + width: 400px !important; + right: 200px; + top: 70px; + background-color: #110523; + opacity: 0; + transition: 0.4s; + z-index: 23; +} +main > .bg-mig > nav ._cart > div > section:nth-of-type(1) { + color: #ccccd1; +} +main > .bg-mig > nav ._cart > div > section:nth-of-type(1) > h3 { + color: #ccccd1; +} +main > .bg-mig > nav ._cart > div > section:nth-of-type(1) > div > span { + width: 80px; +} +main > .bg-mig > nav ._cart > div > section:nth-of-type(1) > div > span:nth-of-type(2) { + text-decoration: line-through; +} +main > .bg-mig > nav ._cart > div > section:nth-of-type(1) > div > span:nth-of-type(3) { + color: #E8AE1A; +} +main > .bg-mig > nav ._cart > div > section:nth-of-type(2) { + height: 1px; + background-color: #ccccd1; + width: 90%; +} +main > .bg-mig > nav ._cart > div > div > span { + height: 50px; +} +main > .bg-mig > nav ._cart > div > div:nth-of-type(1) { + margin-top: 20px; +} +main > .bg-mig > nav ._cart > div > div:nth-of-type(1) > span { + width: 165px; + color: #ccccd1; +} +main > .bg-mig > nav ._cart > div > div:nth-of-type(2) > span { + width: 330px; + background-color: #E8AE1A; + cursor: pointer; +} +main > .bg-mig > nav ._cart > div > div:nth-of-type(3) { + margin-top: 8px; +} +main > .bg-mig > nav ._cart > div > div:nth-of-type(3) > span { + width: 330px; + background-color: #1f1536; + color: #ccccd1; + text-transform: uppercase; + cursor: pointer; +} +main > .bg-mig .humbargerMenu { + background-color: rgba(31, 21, 54, 0.8156862745); + transition: 0.4s; + z-index: 30 !important; + position: absolute; + left: 0; +} +main > .bg-mig .humbargerMenu > ul > li > a { + text-transform: capitalize; + color: #e5e5e5; + font-size: 20px; + transition: 0.4s; + /* &:hover{ + color: #eda704; + } */ +} +main .search-box { + opacity: 0; + visibility: hidden; + width: 100%; + height: 100vh; + background-color: rgba(31, 21, 54, 0.6784313725); + top: 0; + left: 0; + z-index: 32; +} +main .search-box > span { + top: 10px; + left: 10px; + color: #ccccd1; + width: 60px; + font-size: 35px; +} +main .search-box > div { + border-bottom: 2px solid #ccccd1; +} +main .search-box > div > input { + background: none; + width: 86%; + border: none; + outline: none; + color: #ccccd1; +} +main .search-box > div > span { + width: 60px; + color: #E8AE1A; + cursor: pointer; +} +main .img-sr { + width: 100%; + height: 100%; + /* &::after{ + content: ''; + display: flex; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-color: #1f1536ab; + z-index: 20; + } */ +} +main .img-sr > figure > img { + width: 56%; + animation: rotateme 50s infinite linear; + opacity: 0.2; +} +@media (max-width: 700px) { + main .img-sr > figure > img { + width: 80%; + } +} +@keyframes rotateme { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +main .warfare { + z-index: 23; + top: 0; + left: 0; + height: 100%; +} +main .warfare > section > div > h6 { + color: #E8AE1A; + font-weight: 800; + font-size: 24px; +} +main .warfare > section > div > h2 { + color: #ccccd1; + font-size: 75px !important; + font-weight: 900 !important; + font-family: "Chivo Mono", monospace; +} +main .warfare > section > div > h2 > span { + color: #E8AE1A; + font-family: "Chivo Mono", monospace; +} +@media (max-width: 700px) { + main .warfare > section > div > h2 { + font-size: 30px !important; + } +} +main .warfare > section > div > p { + color: #ccccd1; + font-size: 14px; +} +main .slider-img { + top: 45px; + right: 200px; +} +main .slider-img2 { + top: 45px; + right: 20px; +} +main .style-three { + background-color: #F6F6F6; +} +main .style-three > div > h1 { + font-weight: bold; +} +main .style-three > div > h1 > span { + color: #E8AE1A; +} +main .style-three > div > p { + color: #7b7b7b; +} +main .style-four { + background-color: #F6F6F6; + /* 88888*** */ + /* 888 */ +} +main .style-four > div > section > div > section { + box-shadow: 0 0 2px 6px #e5e5e5; + background-color: white; +} +main .style-four > div > section > div > section > div:nth-of-type(1) { + /* width: 300px !important; */ +} +main .style-four > div > section > div > section > div:nth-of-type(2) > section > h2 > i { + color: #e4a101; + font-size: 25px; +} +main .style-four > div > section > div > section > div:nth-of-type(2) > section > h4 > p > span { + color: white; +} +main .style-four > div > section > div > section > div:nth-of-type(2) > section > h4::before { + content: ""; + display: flex; + height: 100px; + width: 100%; + background-image: url(../img/released_game_.png); + background-repeat: no-repeat; + position: absolute; + left: -25%; + /* z-index: -1; */ +} +main .style-four > div > section > div > section > div:nth-of-type(2) > ul { + margin-top: 80px; +} +main .style-four > div > section > div > section > div:nth-of-type(2) > ul > li { + font-family: "Roboto", sans-serif; + margin-top: 10px; + color: #565555 !important; +} +main .style-four > div > section > div > section > div:nth-of-type(2) > ul > li > span { + color: #7b7b7b; + margin-left: 10px; +} +main .style-four > div > section > div > section > div:nth-of-type(2) > ul > li:last-child { + color: #7b7b7b !important; +} +main .style-four ._swiper-four > div > figure > img { + width: 100% !important; +} +main .style-four ._swiper-four .autoplay-progress { + position: absolute; + right: 16px; + bottom: 36px; + z-index: 10; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: #ccccd1 !important; + color: var(--swiper-theme-color); +} +main .style-four ._swiper-four .autoplay-progress > svg { + --progress: 0; + position: absolute; + left: 0; + top: 0px; + z-index: 10; + width: 100%; + height: 100%; + stroke-width: 4px; + stroke: var(--swiper-theme-color); + fill: none; + stroke-dashoffset: calc(125.6 * (1 - var(--progress))); + stroke-dasharray: 125.6; + transform: rotate(-90deg); +} +main .style-four ._swiper-four > .swiper-pagination { + background-color: white !important; +} +@media (max-width: 1200px) { + main .style-four .swiperTop { + width: 530px !important; + } +} +main .style-four .swiperTop > section { + background-color: white; +} +main .style-four .swiperTop > section > section > figure > img { + -o-object-fit: cover; + object-fit: cover; + width: 100% !important; + height: 40% !important; +} +main .style-five { + background-color: #F6F6F6; +} +main .style-five > span { + display: flex; + width: 450px; + height: 150px; + background-color: #F6F6F6; + position: absolute; +} +main .style-five > span:nth-of-type(1) { + -webkit-clip-path: polygon(52% 100%, 0 0, 100% 0); + clip-path: polygon(52% 100%, 0 0, 100% 0); + left: 50%; + top: 0; + transform: translate(-50%, 0); +} +main .style-five > span:nth-of-type(2) { + -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + left: 50%; + bottom: 0; + transform: translate(-50%, 0); +} +main .style-five > div { + height: auto; + background-image: url("../img/img15.jpg"); +} +main .style-five > div > section > div > section > div { + /* ****************+++++=== */ +} +main .style-five > div > section > div > section > div:nth-of-type(1) > h1 { + color: #ccccd1; + font-weight: bold; +} +main .style-five > div > section > div > section > div:nth-of-type(1) > h1 > span { + color: #e4a101; +} +main .style-five > div > section > div > section > div:nth-of-type(1) > p { + color: #ccccd1; +} +main .style-five > div > section > div > section > div:nth-of-type(1) > section > figure > span { + transition: 0.4s; + background-image: url("../img/img16.jpg"); + background-repeat: no-repeat; + background-size: cover; +} +main .style-five > div > section > div > section > div:nth-of-type(1) > section > figure > figcaption > h2 { + color: #ccccd1; +} +main .style-five > div > section > div > section > div:nth-of-type(1) > section > figure > figcaption > p { + color: #ccccd1; +} +main .style-five > div > section > div > section > div:nth-of-type(2) > section > figure { + /***************** */ +} +main .style-five > div > section > div > section > div:nth-of-type(2) > section > figure:nth-of-type(1) { + top: -9%; + z-index: 1; +} +main .style-five > div > section > div > section > div:nth-of-type(2) > section > figure:nth-of-type(2) { + right: 0; +} +main .style-five > div > section > div > section > div:nth-of-type(2) > section > figure:nth-of-type(3) { + bottom: 40px; + left: 263px; +} +main .style-five > div > section > div > section > div:nth-of-type(2) > section > figure:nth-of-type(3) > img { + animation: rotateme 50s infinite linear; +} +main .style-five > div > section > div > section > div:nth-of-type(2) > section > figure:nth-of-type(4) { + bottom: 105.9px; + left: 143px; +} +main .grid-items { + background-color: #F6F6F6; +} +main .section-title h2 { + font-weight: 900; +} +main .section-title h2 > span { + color: #e4a101; +} +main .imgup { + position: relative; + top: -60.7px; +} +main .featured-game-item > figcaption { + top: 0; + left: 0; + width: 100%; + height: 100%; +} +main .featured-game-item > figcaption::after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(233, 163, 1, 0.749); + transition: 0.4s linear; + opacity: 0; +} +main .featured-game-item > figcaption:hover::after { + opacity: 1; + visibility: visible; +} +main .featured-game-item > figcaption:hover > div:nth-of-type(1) { + opacity: 1; +} +main .featured-game-item > figcaption:hover > div:nth-of-type(2) { + opacity: 0; +} +main .featured-game-item > figcaption > div:nth-of-type(1) { + transition: 0.4s linear; + opacity: 0; + z-index: 23; +} +main .featured-game-item > figcaption > div:nth-of-type(1) > section { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +main .featured-game-item > figcaption > div:nth-of-type(1) > section > h4 > a { + color: #110523; + font-weight: bold; +} +main .featured-game-item > figcaption > div:nth-of-type(1) > section > h4 > a > span { + color: #e5e5e5; +} +main .featured-game-item > figcaption > div:nth-of-type(1) > section > div > span, +main .featured-game-item > figcaption > div:nth-of-type(1) > section > div i { + color: #e5e5e5; +} +main .featured-game-item > figcaption > div:nth-of-type(2) { + transition: 0.4s linear; + bottom: 50px; +} +main .featured-game-item > figcaption > div:nth-of-type(2) > h4 > a { + color: #e5e5e5; + font-weight: bold; +} +main .featured-game-item > figcaption > div:nth-of-type(2) > h4 > a > span { + color: #e4a101; +} +main .featured-game-item > figcaption > div:nth-of-type(2) > i { + color: #e4a101; +} +main .featured-game-item > figcaption > div:nth-of-type(2) > span { + color: #e5e5e5; +} +main .style-six { + height: auto; + background-image: url("../img/img31.jpg"); +} +main .style-six > div > h1 { + font-weight: bold; + color: #e5e5e5; +} +main .style-six > div > h1 > span { + color: #E8AE1A; +} +main .style-six > div > p { + color: #e5e5e5; +} +main .style-sevent { + background-color: #1C181E; +} +main .style-sevent > div { + /* =============********* */ +} +main .style-sevent > div:nth-of-type(1) > h1 { + color: #e5e5e5; + font-weight: bold; +} +main .style-sevent > div:nth-of-type(1) > h1 > span { + color: #e4a101; +} +main .style-sevent > div:nth-of-type(1) > p { + color: #e5e5e5; +} +main .style-sevent > div #myswiper > section > figure { + box-shadow: 0px 5px 12.09px 0.91px rgba(0, 0, 0, 0.16); +} +main .style-sevent > div #myswiper > section > figure > figcaption > a { + width: 90px; + height: 40px !important; + background-color: #e4a101; + transform: skewX(-16deg); + top: -25px; + color: #110523; + font-weight: bold; +} +main .style-sevent > div #myswiper > section > figure > figcaption > h4 { + font-size: 18px !important; +} +main .style-sevent > div #myswiper > section > figure > figcaption > h4 > a { + color: #e5e5e5; + font-size: 18px !important; +} +main .style-sevent > div #myswiper > section > figure > figcaption > div > span { + color: #e4a101; + font-weight: 600; +} +main .style-eight { + background-color: #F6F6F6; +} +main .style-eight > div:nth-of-type(2) > section > figure > figcaption > h4 { + font-weight: bold; +} +main .style-eight > div:nth-of-type(2) > section > figure > figcaption > div > span { + cursor: pointer; +} +main .style-eight > div:nth-of-type(2) > section > figure > figcaption > div > span:nth-of-type(2) > i { + margin-left: 20px; +} +main .style-eight > div:nth-of-type(2) > section > figure > figcaption > div > span > i { + color: #e4a101; +} +main footer { + height: auto; + background: url("../img/t-footer.jpg"); +} +main footer > figure > img:nth-of-type(1) { + bottom: 0; +} +main footer > figure > img:nth-of-type(2) { + right: 0; + bottom: 0; +} +main footer > ._div { + background-color: #000; + border-radius: 60px; + /* height: 120px !important; */ + height: auto; + top: -60px; +} +main footer > ._div > section > div { + /* --------- */ +} +main footer > ._div > section > div:nth-of-type(1) > h2 { + color: #F6F6F6; + font-weight: bold; +} +main footer > ._div > section > div:nth-of-type(1) > h2 > span { + color: #e4a101; +} +main footer > ._div > section > div:nth-of-type(2) > section { + background-color: #2f2c31 !important; + transform: skewX(-16deg); + margin-right: 4px; +} +main footer > ._div > section > div:nth-of-type(2) > section > span > i { + color: #e4a101; +} +main footer > ._div > section > div:nth-of-type(2) > section > input { + background: none; + border: none; + outline: none; + color: #e5e5e5; +} +main footer > ._div > section > div:nth-of-type(2) > a { + background-color: #e4a101; + margin-left: 3px; + font-weight: 700; +} +main footer > section > div > section:nth-of-type(1) { + z-index: 3; +} +main footer > section > div > section:last-child { + z-index: 2; +} +main footer > section > div > section:last-child > ul > li > a { + font-size: 35px; +} +main footer > section > div > section:last-child > ul > li > a:hover { + margin-left: 0; +} +main footer > section > div > section:last-child > h5 { + color: #e5e5e5; + position: relative; +} +main footer > section > div > section:last-child > h5::after { + content: ""; + display: flex; + top: 50px; + position: absolute; + width: 40px; + height: 3px; + background-color: #eda704; +} +main footer > section > div > section:last-child > span { + width: 80%; + height: 50px; + background-color: #2f2c31; +} +main footer > section > div > section:last-child > span > input { + background: none; + border: none; + outline: none; + width: 80%; + color: white; +} +main footer > section > div > section:last-child > span > span { + width: 20%; + display: flex; + justify-content: center; + align-items: center; + background-color: #e4a101; + height: 100% !important; + color: #110523; +} +main footer > section > div > section > h3 { + position: relative; + color: #F6F6F6; + font-weight: 900; +} +main footer > section > div > section > h3::after { + content: ""; + display: flex; + top: 50px; + position: absolute; + width: 100px; + height: 5px; + background-color: #eda704; +} +main footer > section > div > section > ul > li > a { + color: #e5e5e5; + transition: 0.4s; +} +main footer > section > div > section > ul > li > a:hover { + color: #e4a101; + margin-left: 7px; +} +main footer > section > div > section > p { + color: #e5e5e5; +} +main footer > section > div > section > span { + color: #e5e5e5; +} +main footer > #copy { + background-color: #000; + bottom: 0; + height: 50px; +} +main footer > #copy > p > span { + color: #eda704; +} + +/* */ +.btn-style-two { + background: transparent; + font-weight: 700; + text-transform: uppercase; + font-style: normal; + height: 70px; + width: 160px; + background-color: #e4a101; + transform: skewX(-16deg); + color: #1f1536; +} +.btn-style-two:hover { + color: #110523; +} +.btn-style-two::before { + content: ""; + position: absolute; + right: -13px; + top: 0; + height: 100%; + width: 5px; + transform: skewX(-1deg); + z-index: 1; + opacity: 1; + background-image: none; + bottom: 0; + border-radius: 0; + left: auto; + background-color: #e4a101; + transition: 0.4s; +} +.btn-style-two:hover::before { + right: 0; +} + +._span { + border: 3px solid #E8AE1A !important; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/assets/css/style.css.map b/assets/css/style.css.map new file mode 100644 index 0000000..ef1bac8 --- /dev/null +++ b/assets/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..5e6d039 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,1250 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300,700;1,500&display=swap'); + + +@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@1,900&display=swap'); + + + + +* { + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + + li { + list-style-type: none; + } + + a { + text-decoration: none; + } +} + + +main { + >header { + height: 50px; + background-color: #000 !important; + + >div { + &:nth-of-type(1) { + height: 100%; + + >span { + height: 100%; + + >span { + background-color: #E8AE1A; + height: 100% !important; + width: 75px; + font-family: 'Roboto', sans-serif; + clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); + } + } + } + + &:nth-of-type(2) { + >section { + >a { + color: rgb(199, 197, 197); + transition: .4s; + + &:hover { + color: #E8AE1A; + } + } + + >span { + position: relative; + + &::after { + content: ''; + display: flex; + width: 2px; + height: 100%; + background-color: #E8AE1A; + position: absolute; + left: 0; + } + + color: rgb(199, 197, 197); + + >i { + color: #E8AE1A; + margin-right: 9px; + } + + } + } + } + } + } + /* hamburgerIcon */ + + /* *********************** */ + >.bg-mig { + width: 100%; + height: auto; + background-image: url("../img/img03.jpg"); + + >nav { + // height: 70px !important; + + + >section { + padding-top: 9px; + background-color: #150627da; + + >div { + >ul { + >div { + + &:nth-of-type(1) { + .active { + transform: skewX(-16deg); + //clip-path: polygon(11% 0, 100% 0%, 88% 100%, 0% 100%); + background-color: #E8AE1A; + + >a { + color: #000 !important; + text-transform: uppercase; + } + } + + >li { + // clip-path: polygon(13% 0, 100% 0%, 87% 100%, 0% 100%); + // border: 1px solid rgb(199, 197, 197); + position: relative; + //margin: 8px; + + padding: 9px; + // padding: 9px 0; + + &::after { + content: ''; + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 100%; + width: 130%; + opacity: 0; + //transform: skewX(-16deg); + clip-path: polygon(11% 0, 100% 0%, 87% 100%, 0% 100%); + background-color: #E8AE1A; + transition: .4s; + // transform: rotate(-45deg); + } + + &:hover::after { + opacity: 1; + } + + + >a { + color: #ccccd1; + transition: .4s; + z-index: 2; + text-transform: uppercase; + + &:hover { + + color: #000; + } + } + } + + } + + &:nth-of-type(2) { + >span { + &:nth-of-type(1) { + margin-right: 20px; + color: #ccccd1; + position: relative; + font-size: 29px; + cursor: pointer; + + &::after { + content: '0'; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + border-radius: 50%; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + top: 10px; + font-size: 13px; + right: 4px; + width: 20px; + height: 20px; + color: #1C0E23; + background-color: #E8AE1A; + } + } + + &:nth-of-type(2) { + cursor: pointer; + background-color: #1C0E23; + color: #E8AE1A; + box-shadow: 0 0 3px 1px #420303; + } + } + } + + } + } + .hamburgerIcon{ + height: 100% !important; + >div{ + + >section{ + + width: 50px !important; + >span{ + background-color: #e8e7eb; + width: 40px; + height: 4px; + margin: 5px; + transition: .4s; + &:nth-of-type(1){ + + transform-origin: top left; + } + &:nth-of-type(3){ + transform-origin: bottom left; + } + + } + + } + } + } + } + } + + /* **** */ + ._cart { + width: 400px !important; + right: 200px; + top: 70px; + background-color: #110523; + opacity: 0; + + transition: .4s; + z-index: 23; + + >div { + >section { + &:nth-of-type(1) { + color: #ccccd1; + + >h3 { + color: #ccccd1; + } + + >div { + >span { + width: 80px; + + // border: 3px solid black; + &:nth-of-type(2) { + text-decoration: line-through + } + + &:nth-of-type(3) { + color: #E8AE1A; + } + } + } + } + + &:nth-of-type(2) { + height: 1px; + background-color: #ccccd1; + width: 90%; + } + } + + >div { + >span { + height: 50px; + } + + &:nth-of-type(1) { + margin-top: 20px; + + >span { + + width: 165px; + color: #ccccd1; + } + } + + &:nth-of-type(2) { + >span { + width: 330px; + background-color: #E8AE1A; + cursor: pointer; + } + } + + &:nth-of-type(3) { + margin-top: 8px; + + >span { + width: 330px; + background-color: #1f1536; + color: #ccccd1; + text-transform: uppercase; + cursor: pointer; + } + } + + } + } + } + + /* ***** */ + + } + + .humbargerMenu{ + background-color: #1f1536d0; + transition: .4s; + z-index: 30 !important; + position: absolute; + left: 0; + >ul{ + >li{ + >a{ + text-transform: capitalize; + color: #e5e5e5; + font-size: 20px; + transition: .4s; + /* &:hover{ + color: #eda704; + } */ + } + } + } + } + + } + + .search-box { + opacity: 0; + visibility: hidden; + + width: 100%; + height: 100vh; + background-color: #1f1536ad; + top: 0; + left: 0; + z-index: 32; + + >span { + top: 10px; + left: 10px; + color: #ccccd1; + width: 60px; + font-size: 35px; + } + + >div { + + border-bottom: 2px solid #ccccd1; + + >input { + background: none; + width: 86%; + border: none; + outline: none; + color: #ccccd1; + } + + >span { + width: 60px; + color: #E8AE1A; + cursor: pointer; + } + } + } + + + /* ******* */ + + + .img-sr { + width: 100%; + height: 100%; + + /* &::after{ + content: ''; + display: flex; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-color: #1f1536ab; + z-index: 20; + } */ + >figure { + + >img { + width: 56%; + animation: rotateme 50s infinite linear; + opacity: 0.2; + + @media (max-width: 700px) { + width: 80%; + } + } + + @keyframes rotateme { + from { + + transform: rotate(0deg); + } + + to { + + transform: rotate(360deg); + } + } + } + } + + /* )******** */ + .warfare { + z-index: 23; + top: 0; + left: 0; + height: 100%; + + >section { + >div { + >h6 { + color: #E8AE1A; + font-weight: 800; + font-size: 24px; + } + + >h2 { + color: #ccccd1; + font-size: 75px !important; + font-weight: 900 !important; + font-family: 'Chivo Mono', monospace; + + >span { + color: #E8AE1A; + font-family: 'Chivo Mono', monospace; + } + + @media (max-width: 700px) { + font-size: 30px !important; + } + } + + >p { + color: #ccccd1; + font-size: 14px; + } + + + + } + } + } + + /* **** */ + .slider-img { + top: 45px; + right: 200px; + // bottom: 0; + } + + .slider-img2 { + top: 45px; + right: 20px; + // bottom: 0; + } + + + .style-three { + background-color: #F6F6F6; + + >div { + >h1 { + font-weight: bold; + + >span { + color: #E8AE1A; + } + } + + >p { + color: #7b7b7b; + } + } + } + + .style-four { + background-color: #F6F6F6; + + >div { + + >section { + >div { + + >section { + box-shadow: 0 0 2px 6px #e5e5e5; + background-color: #ffffffff; + + >div { + + + &:nth-of-type(1) { + /* width: 300px !important; */ + } + + &:nth-of-type(2) { + + >section { + >h2 { + >i { + color: #e4a101; + font-size: 25px; + } + } + + >h4 { + + >p { + >span { + color: #FFFFFFFF; + } + } + + &::before { + content: ''; + display: flex; + height: 100px; + width: 100%; + background-image: url(../img/released_game_.png); + background-repeat: no-repeat; + position: absolute; + left: -25%; + /* z-index: -1; */ + + + } + } + + } + + >ul { + margin-top: 80px; + + >li { + font-family: 'Roboto', sans-serif; + margin-top: 10px; + color: #565555 !important; + + >span { + color: #7b7b7b; + margin-left: 10px; + } + + &:last-child { + color: #7b7b7b !important; + } + } + + } + } + } + } + } + } + } + + /* 88888*** */ + ._swiper-four { + >div { + >figure { + >img { + width: 100% !important; + + + } + } + } + + .autoplay-progress { + position: absolute; + right: 16px; + bottom: 36px; + z-index: 10; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: #ccccd1 !important; + color: var(--swiper-theme-color); + + >svg { + --progress: 0; + position: absolute; + left: 0; + top: 0px; + z-index: 10; + width: 100%; + height: 100%; + + stroke-width: 4px; + stroke: var(--swiper-theme-color); + fill: none; + stroke-dashoffset: calc(125.6 * (1 - var(--progress))); + stroke-dasharray: 125.6; + transform: rotate(-90deg); + } + } + + >.swiper-pagination { + + background-color: #ffffffff !important; + + } + } + + /* 888 */ + .swiperTop { + + @media (max-width: 1200px) { + width: 530px !important; + } + + >section { + background-color: #ffffffff; + + >section { + >figure { + >img { + object-fit: cover; + width: 100% !important; + height: 40% !important; + } + } + } + } + } + } + + + + /* style-five */ + .style-five { + background-color: #F6F6F6; + + >span { + display: flex; + width: 450px; + height: 150px; + background-color: #F6F6F6; + position: absolute; + + &:nth-of-type(1) { + + clip-path: polygon(52% 100%, 0 0, 100% 0); + left: 50%; + top: 0; + transform: translate(-50%, -0); + } + + &:nth-of-type(2) { + + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + left: 50%; + bottom: 0; + transform: translate(-50%, -0); + } + } + + >div { + height: auto; + background-image: url("../img/img15.jpg"); + + + >section { + >div { + >section { + >div { + &:nth-of-type(1) { + >h1 { + color: #ccccd1; + font-weight: bold; + + >span { + color: #e4a101; + } + } + + >p { + color: #ccccd1; + } + + >section { + >figure { + >span { + transition: .4s; + background-image: url('../img/img16.jpg'); + background-repeat: no-repeat; + background-size: cover; + } + + >figcaption { + >h2 { + color: #ccccd1; + + } + + >p { + color: #ccccd1; + } + } + } + } + } + + /* ****************+++++=== */ + &:nth-of-type(2) { + >section { + >figure { + &:nth-of-type(1) { + top: -9%; + z-index: 1; + } + + /***************** */ + &:nth-of-type(2) { + right: 0; + } + + &:nth-of-type(3) { + >img { + // width: 200px; + animation: rotateme 50s infinite linear; + + + + } + + + bottom: 40px; + left: 263px; + } + + &:nth-of-type(4) { + bottom: 105.9px; + left: 143px; + } + } + } + } + } + } + } + } + } + } + + /* ===================**************** */ + + .grid-items { + background-color: #F6F6F6; + } + + .section-title { + h2 { + font-weight: 900; + + >span { + color: #e4a101; + } + } + } + + .imgup { + position: relative; + top: -60.7px; + } + + .featured-game-item { + + + >figure {} + + >figcaption { + top: 0; + left: 0; + width: 100%; + height: 100%; + + &::after { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(233, 163, 1, 0.749); + transition: .4s linear; + opacity: 0; + + } + + &:hover::after { + opacity: 1; + visibility: visible; + } + + &:hover>div:nth-of-type(1) { + opacity: 1; + } + + &:hover>div:nth-of-type(2) { + opacity: 0; + } + + >div { + &:nth-of-type(1) { + transition: .4s linear; + opacity: 0; + + z-index: 23; + + >section { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + >h4 { + >a { + color: #110523; + font-weight: bold; + + >span { + color: #e5e5e5; + } + } + } + + >div { + + >span, + i { + color: #e5e5e5; + } + } + } + } + + &:nth-of-type(2) { + transition: .4s linear; + bottom: 50px; + + >h4 { + >a { + color: #e5e5e5; + font-weight: bold; + + >span { + color: #e4a101; + } + } + } + + >i { + color: #e4a101; + } + + >span { + color: #e5e5e5; + } + + } + } + } + + } + + /* style-six===============*********** */ + + .style-six { + height: auto; + background-image: url('../img/img31.jpg'); + + >div { + >h1 { + font-weight: bold; + color: #e5e5e5; + + >span { + color: #E8AE1A; + } + } + + >p { + color: #e5e5e5; + } + } + } + + /* style-sevent */ + + .style-sevent { + background-color: #1C181E; + + >div { + &:nth-of-type(1) { + >h1 { + color: #e5e5e5; + font-weight: bold; + + >span { + color: #e4a101; + } + } + + >p { + color: #e5e5e5; + } + } + + /* =============********* */ + + #myswiper { + >section { + + >figure { + box-shadow: 0px 5px 12.09px 0.91px rgba(0, 0, 0, 0.16); + + >figcaption { + + >a { + width: 90px; + height: 40px !important; + background-color: #e4a101; + transform: skewX(-16deg); + top: -25px; + color: #110523; + font-weight: bold; + } + + >h4 { + font-size: 18px !important; + + >a { + color: #e5e5e5; + font-size: 18px !important; + } + } + + >div { + >span { + color: #e4a101; + font-weight: 600; + } + } + } + } + } + } + } + } + + /* ================************* style-eight */ + .style-eight { + background-color: #F6F6F6; + + >div { + &:nth-of-type(1) {} + + &:nth-of-type(2) { + >section { + >figure { + >figcaption { + >h4 { + font-weight: bold; + } + + >div { + >span { + cursor: pointer; + + &:nth-of-type(2) { + >i { + margin-left: 20px; + } + } + + >i { + color: #e4a101; + + } + } + } + } + } + } + } + } + } + + /* footer************+================== */ + + footer { + height: auto; + background: url('../img/t-footer.jpg'); + + >figure { + >img { + &:nth-of-type(1) { + bottom: 0; + } + + &:nth-of-type(2) { + right: 0; + bottom: 0; + } + } + + } + + >._div { + background-color: #000; + border-radius: 60px; + /* height: 120px !important; */ + height: auto; + top: -60px; + + >section { + + >div { + &:nth-of-type(1) { + >h2 { + color: #F6F6F6; + font-weight: bold; + + >span { + color: #e4a101; + } + } + } + + /* --------- */ + + &:nth-of-type(2) { + >section { + background-color: #2f2c31 !important; + transform: skewX(-16deg); + margin-right: 4px; + + >span { + >i { + color: #e4a101; + } + } + + >input { + background: none; + border: none; + outline: none; + color: #e5e5e5; + + } + } + + >a { + background-color: #e4a101; + margin-left: 3px; + font-weight: 700; + } + } + } + } + } + + + + >section { + >div { + >section { + &:nth-of-type(1) { + z-index: 3; + } + + &:last-child { + z-index: 2; + >ul{ + >li{ + >a{ + font-size: 35px; + &:hover{ + margin-left: 0; + } + } + } + } + >h5 { + color: #e5e5e5; + position: relative; + + &::after { + content: ''; + display: flex; + top: 50px; + position: absolute; + width: 40px; + height: 3px; + background-color: #eda704; + } + } + + >span { + width: 80%; + height: 50px; + background-color: #2f2c31; + + >input { + background: none; + border: none; + outline: none; + width: 80%; + color: #FFFFFFFF; + + } + + >span { + width: 20%; + display: flex; + justify-content: center; + align-items: center; + background-color: #e4a101; + height: 100% !important; + color: #110523; + } + } + } + + >h3 { + position: relative; + color: #F6F6F6; + font-weight: 900; + + &::after { + content: ''; + display: flex; + top: 50px; + position: absolute; + width: 100px; + height: 5px; + background-color: #eda704; + } + } + + >ul { + >li { + >a { + color: #e5e5e5; + transition: .4s; + + &:hover { + color: #e4a101; + margin-left: 7px; + } + } + } + } + + >p { + color: #e5e5e5; + } + + >span { + color: #e5e5e5; + } + } + } + } + + >#copy { + background-color: #000; + bottom: 0; + height: 50px; + + >p { + >span { + color: #eda704; + } + } + + } + } + +} + + + +/* */ + + +.btn-style-two { + background: transparent; + font-weight: 700; + text-transform: uppercase; + font-style: normal; + height: 70px; + width: 160px; + background-color: #e4a101; + transform: skewX(-16deg); + + color: #1f1536; + + &:hover { + color: #110523; + } + + &::before { + content: ""; + position: absolute; + right: -13px; + top: 0; + height: 100%; + width: 5px; + transform: skewX(-1deg); + z-index: 1; + opacity: 1; + background-image: none; + bottom: 0; + border-radius: 0; + left: auto; + background-color: #e4a101; + transition: .4s; + } + + &:hover::before { + right: 0; + + } +} + + +._span { + border: 3px solid #E8AE1A !important; + +} \ No newline at end of file