Get Ready Elementor Templates

eSports and Gaming Landing Page using Elementor | WordPress 2024

Subscribe To My YouTube Channel For More Upcoming Videos

Slider Area CSS




 

Slider Area Class


slider__area

 

Banner Object CSS


.slider__shapes{ 
    opacity: 0.27;
    
}

.slider__shapes .shapes {
    animation: shapeBlinker 1.5s linear infinite;
    opacity: 1;
    z-index: -1;
}
.slider__shapes .shapes-1 {
  animation-delay: 0.2s!important;
}

.slider__shapes .shapes-2 {
  animation-delay: 0.4s!important;
}

.slider__shapes .shapes-3{
  animation-delay: 0.2s!important;
}

.slider__shapes .shapes-4 {
  animation-delay: 0.6s!important;
}

@-webkit-keyframes shapeBlinker {
  50% {
    opacity: 0.59;
  }
}
@keyframes shapeBlinker {
  50% {
    opacity: 0.59;
  }
}

 

Banner Object Classes


slider__shapes
shapes-1
shapes-2
shapes-3
shapes-4

 

Title Style CSS


.tittle::after {
    content: "";
    display: block;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 93.846% 100%, 6.154% 100%, 0% 0%);
    clip-path: polygon(0% 0%, 100% 0%, 93.846% 100%, 6.154% 100%, 0% 0%);
    width: 65px;
    height: 5px;
    margin: 20px auto 0;
    background: #45F882;
}

 

Title Style Class


tittle

 

Button Style CSS


.btn svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.btn .cls-1 {
    fill: #45F882;
    stroke: #fff;
    stroke-width: 1.5px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.btn:hover .cls-1{
    fill: #fff;
}


.btn-1 path {
    stroke: #45F882;
}
.btn-2 path {
    stroke:  #FFBE18;
}
.btn-3 .cls-1 {
    fill: #FFBE18 !important;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;}
    
.btn-3:hover .cls-1{
    fill: #45F882 !important
    
}


 

Button Style Classes


btn
cls-1
btn-2
btn-3

 

Timeline Border CSS


.Timeline-border::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: -moz-linear-gradient(90deg, #10161c 0%, #45F882 100%);
    background: -webkit-linear-gradient(90deg, #10161c 0%, #45F882 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}


 

Timeline Border Class


Timeline-border

 

Team Section CSS


.team__item{
    transition: 0.3s linear;
    
}

.team__item::before, .team__item::after {
    content: "";
    position: absolute;
    left: 0;
    top: -60px;
    width: 70px;
    height: 320px;
    background: #45F882;
    -webkit-transform: rotate(-55deg);
    -moz-transform: rotate(-55deg);
    -ms-transform: rotate(-55deg);
    -o-transform: rotate(-55deg);
    transform: rotate(-55deg);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    opacity: 0.55;
    z-index: -1;
}

.team__item::after {
    left: auto;
    right: 0;
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
}

.team__item:hover {
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    transform: translateY(-7px);
} 

.team__item:hover::before, .team__item:hover::after {
    opacity: 1;
}

 

Team Section Class


team__item

 

Tab Section CSS




.tabs svg{
    border-radius: 50px;
}

.tabs .e-n-tab-title-text{
    display: none;
}

.tabs .e-n-tabs-heading{
    padding: 22px 0;
    position: relative;
    width: 83.33333333%;
    margin: auto!important;
}

.tabs .e-n-tabs-heading::before, .tabs .e-n-tabs-heading::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--e-global-color-secondary) 50%, transparent 100%);
}

.tabs .e-n-tabs-heading::after{
    top: 123px!important;
}


.tabs .tab-content::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 0;
    width: calc(100% - 30px);
    height: 1px;
    background: #45F882;
    background: linear-gradient(45deg, rgba(2, 0, 36, 0) 0%, #45F882 100%);
    opacity: 0.329;
    
}
.tabs .about__content-list{
    background-image: -moz-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    background-image: -webkit-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    background-image: -ms-linear-gradient(0deg, #1f2935 0%, transparent 100%, #10181f 100%);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -ms-transition: 0.3s linear;
    -o-transition: 0.3s linear;
    transition: 0.3s linear;
}

.tabs .about__content-list:hover{
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    transform: translateX(-10px);
}
.tab-button-gradient .elementor-button{
    background-image: -moz-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
    background-image: -webkit-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
    background-image: -ms-linear-gradient(90deg, #10181f 0%, transparent 0%, #141a20 100%);
}


 

Tab Section Classes


tabs
tab-content
about__content-list
tab-button-gradient

 

Custom Carousel CSS


.custom-carousel .gallery__content{
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
}

.custom-carousel .swiper-slide-next .gallery__content {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

.custom-carousel .gallery__item{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}

.custom-carousel .swiper-slide-next .gallery__item{
        -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

@media (max-width: 766px) {

.custom-carousel .swiper-slide-active .gallery__content{
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
} 

}

 

Custom Carousel Class


custom-carousel
gallery__item
gallery__content

 

Roadmap Style CSS


.roadMap-box.active::before {
    content: "";
    position: absolute;
    left: -42px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 18px;
    border-color: transparent transparent transparent #45F882;
    opacity: 0.9;
    z-index: -1;
}   
    
.roadMap__list svg{  
    
    position: a;
    border: 2px solid #262e38;
    border-radius: 500%;
    
}

.roadMap__list.active svg{
    border-color: #1b242e !important;
}

.roadMap-box img{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.roadMap-box:hover img{
    opacity: 0.11!important;
}


 

Roadmap Style Classes


roadMap-box
roadMap__list

 

Trending Section CSS


.Nft__item .Nft-price .eth{
    color: var(--e-global-color-a5230b3);
    font-weight: 700;
    margin-left: 5px;
}

.Nft__item .Nft-price .elementor-icon-list-icon, .Nft-price .elementor-icon-list-icon svg{
    margin: 0;
}

.Nft__item .divider .elementor-divider-separator::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #383d44 50%, transparent 100%);
}

.heart-right{
        margin-left: auto;
}

 

Trending Section Classes


Nft__item
heart-right
divider

 

Responsive Area CSS


@media (max-width: 1500px){
.slider__area::before, .slider__area::after {
    height: 40px;
}
}

@media (max-width: 1024px){
.slider__area::before, .slider__area::after {
    height: 30px;
}
}


@media  (max-width: 767px){
    .tabs .tab-content::after{
    width: calc(100% - 15px);
    }
}

 

Wanna join my secret winners’ gang?

I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!

  • Money Making Blog Tricks
  • $100k by Freelancing Formula
  • Secret Resources
  • Rich Dad business tactics
  • And, of course about my upcoming videos and plans