Fahad is a talented web developer with a fantastic dimension of creativity and proactivity. He made the whole process very easy for me with excellent communication. I enjoyed the process and timely delivery. Thank you so much.
My goodness! Fahad!!! You're a magician. Oh my gosshh! I can't thank you more, Also thanks to Max for referring you! I'm super happy!
Subscribe To My YouTube Channel For More Upcoming Videos
slider__area
.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; } }
slider__shapes shapes-1 shapes-2 shapes-3 shapes-4
.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; }
tittle
.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 }
btn cls-1 btn-2 btn-3
.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
.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__item
.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%); }
tabs tab-content about__content-list tab-button-gradient
.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 gallery__item gallery__content
.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-box roadMap__list
.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; }
Nft__item heart-right divider
@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); } }
I only share these secrets with the people in this group. Honestly, you can not find such tricks for FREE on the whole internet!