Get a Quote
MENU

Get Ready Elementor Templates

Download Now

Request A Quote

Jim Fahad

Hi, please provide your request details below and I’ll get back to you.

0 / 5000

Define in Detail

Include all the necessary details needed to complete your request.

For example:

If you are looking for a business website, you can specify your business type, other reference websites you like, preferred color, etc.

Once you place your order, when would you like your service delivered?

Set a Delivery Time

This is the amount of time you want it to be completed. Please note that a request for faster delivery may impact the price.

$

Set Your Budget

Enter an amount you are willing to spend for this service.

Recent Projects

Jay Cooper 5.00
United States
I have a local store in California US. But, I want an online channel to grow my business further away. So, all I need to make an entire website from A-Z. Let's discuss more on Skype?
Client feedback:

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.

Angela July 5.00
United Kingdom
For my personal portfolio, I've built a website using Divi. When I try to work on it several pages are broken. I need your personal help. And let me confess another thing, I've tried some freelancers to do this task from Fiverr and Upwork and I'm completely disappointed with their result. Most of them pretend like they know it all but the result is zero. Then one of my good friends Max(you know him) referred me to your website and said you're the real guy! Please, I need it to be done. I'm flexible with the budget. Please! Are you available this week? No rush though!
Show MoreShow Less
Client feedback:

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!

IMPORTANT LINKS

Animation Pulse CSS

 

Animation Pulse CSS Class


animation-pulse

 

Animation Wobble CSS


.animation-wobble{
  position: relative;
  animation: animation-wobble 3s linear infinite alternate;
}

@keyframes animation-wobble {
  0%   {transform: translateY(10px);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(10px);}
}

 

Animation Wobble CSS Class


animation-wobble

 

Mouse Animation CSS


.mouse-animation{
    position: relative;
    animation: mouse-animation 3s linear infinite alternate;
}
@keyframes mouse-animation {
  0%   {transform: translateY(2px);}
  50% {transform: translateY(-2px);}
  100% {transform: translateY(2px);}
}

 

Mouse Animation CSS Class


mouse-animation

 

Circle Animation CSS


.circle-animation{
    animation: rotate 20s linear infinite;
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

 

Circle Animation CSS Class


circle-animation

 

Background Glass Effect CSS


.bg-glass-effect{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

 

Background Glass Effect CSS Class


bg-glass-effect

 

Button Gradient Border CSS


.elementor-button,.blog-post .jkit-meta-readmore a{
    position: relative;
}

.elementor-button::before,.blog-post .jkit-meta-readmore a::before {
content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px; 
  padding: 1px; 
  background:linear-gradient(90deg,#20D9A1,#5F39FF); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  
}

 

Service Icon Box CSS


.service-box .service-icon .elementor-widget-container{
        transition: all .3s;
    }
.service-box:hover .service-icon .elementor-widget-container{
        background-color: transparent;
        background-image: linear-gradient(180deg, #20d9a1 0%, #5f39ff 100%);
    }

 

Service Icon Box CSS Classes


service-box
service-icon

 

Team Member Hover Effect CSS


.image-wraper-item{
        transform: scale(0);
        transition: transform  0.5s;
    }
.image-wraper:hover .image-wraper-item{
        transform: scale(1);
    }

 

Team Member Hover Effect CSS Classes


image-wraper
image-wraper-item

 

Service List CSS


.service-list svg{
        position: relative;
        top: 10px;
    }
    .elementor-icon-box-title{
        transition: all 0.3s;
    }
    .service-list:hover .elementor-icon-box-title{
        color: #5F39FF !important;
    }
    .service-list:hover .elementor-icon{
        fill: #5F39FF !important;
    }
    
    .circle{
        height: 350px;
        width: 350px;
    }

 

Service List CSS Class


service-list
circle

 

Blog Post CSS


.blog-post .by{
    margin-right: 5px;
}

 

Blog Post CSS Class


blog-post

 

IMPORTANT LINKS

Banner Background CSS

   

Banner Background Class


banner-bg

   

Animation CSS


.animation-1 {
  position: relative;
  animation-name: animation-1;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-1 {
  0%   {top:10px;}
  100% {top:-40px;}
}

.animation-2 {
  position: relative;
  animation-name: animation-2;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-2 {
  0%   {bottom: -70px;}
  100% {bottom: -40px;}
}

.animation-3 {
  position: relative;
  animation-name: animation-3;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-3 {
  0%   {top: 430px;}
  100% {top: 460px;}
}

.animation-4 {
  position: relative;
  animation-name: animation-4;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-4 {
  0%   {top: 0px;}
  100% {top: -30px;}
}

.animation-5 {
  position: relative;
  animation-name: animation-5;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-5 {
  0%   {top: 160px;}
  100% {top: 130px;}
}

   

Animations Classes


animation-1
animation-2
animation-3
animation-4
animation-5

   

IMPORTANT LINKS

Header CSS

   

Header Class


***Main Menu Class***
main-menu

   

Home Page Marquee CSS

   

IMPORTANT LINKS
IMPORTANT LINKS
IMPORTANT LINKS

Button CSS

   

Button Classes


***Solid Button Hover Class***
btn-style-one btn-style-skew

***Gradient Button Hover Class***
btn-style-one btn-style-two btn-style-skew

   

Sub-Title Class


sub-title

   

Sub-Title Border


/* sub-title After Border */
.sub-title .elementor-heading-title:before {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -4px;
    height: 2px;
    width: 26px;
    margin-left: 10px;
    background: var(--gradient-1);
    content: "";
}
.sub-title .elementor-heading-title:after {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -6px;
    height: 6px;
    width: 6px;
    margin-left: 36px;
    background: var(--gradient-1);
    content: "";
    border-radius: 50%;
}

   

Service Animation CSS


/*Service Section */
.inner-box .icon, .inner-box .image img, .inner-box .text, .inner-box .title .elementor-heading-title {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
.inner-box:hover .icon{
    -webkit-transform: rotate(180deg) scale(-1);
    transform: rotate(180deg) scale(-1) !important;
}
.inner-box:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--bg-theme-color2);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    border-radius: 500px 0 0;
    content: "";
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}
.inner-box:hover::after {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.service-block-two.inner-box::after {
    -webkit-transform-origin: left bottom!important;
    transform-origin: left bottom!important;
    border-radius: 0 500px 0 0!important;
}
.service-block-three.inner-box:after {
    -webkit-transform-origin: right top;
    transform-origin: right top;
    border-radius: 0 0 0 500px;
}
.service-block-four.inner-box:after {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 0 0 500px 0;
}
.inner-box:hover .text, .inner-box:hover .title .elementor-heading-title{
    color: #ffffff !important;
}
.inner-box:hover .image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
@media only screen and (max-width: 1024px){
    .inner-box .service-block-image{
        position: relative;
    }
  .elementor-absolute.icon{
      position: relative !important;
  }
}

   

Service Classes


***Service 1 Inner 2 Class***
service-block-one inner-box
***Service 2 Inner 2 Class***
service-block-two inner-box
***Service 3 Inner 2 Class***
service-block-three inner-box
***Service 4 Inner 2 Class***
service-block-four inner-box

***Service Inner 3 Class***
service-block-image

***Service Inner 3 Image Class***
image

***Service Icon Class***
icon

***Service H3 Class***
title

***Service Text Class***
text

   

Portfolio Animation CSS


/*Portfolio Section*/
.project-block .image-box .elementor-widget-container:after{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    opacity: 0;
    content: "";
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to #7243f2);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #7243f2 100%);
    pointer-events: none;
    z-index: 2;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.project-block  .image-box:hover .elementor-widget-container:after {
    height: 100%;
    opacity: 1;
}
.project-block .image-box::after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0%;
    width: 100%;
    content: "";
    background-color: #ffffff;
    pointer-events: none;
    z-index: 2;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.project-block:hover .image-box:after {
    height: 20px;
    opacity: 1;
}
.project-block .image-box img, .project-block .content-box{
    transition: all 0.4s ease !important;
}
.project-block:hover .image-box img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1) !important;
    -webkit-filter: grayscale(1);
    filter: grayscale(1) !important;
}
.project-block:hover .content-box{
    bottom: 0;
}

   

Portfolio Classes


***Single Block Class***
project-block

***Single Block > ImageBox Class***
image-box

***Single Block > Contentbox Class***
content-box

   

FAQ CSS


/*FAQ Section*/
.upper-box::after {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: -280px;
    height: 510px;
    width: 510px;
    background-color: #f5f5f9;
    content: "";
    z-index: -1;
    border-radius: 0 0 0 500px;
}
.bg-inner-column:before {
    position: absolute;
    top: 0;
    height: 100%;
    left: -1000px;
    right: 0;
    width: auto!important;
    background: linear-gradient(to left, #ae8fff, #7243f2);;
    content: "";
}
.bg-inner-column .sub-title .elementor-heading-title:before {
    background: #fff;
}
.bg-inner-column .sub-title .elementor-heading-title:after {
    background: #fff;
}

   

FAQ Class


upper-box

   

About Section CSS


/*About Agency Section*/
.overlay-anim:after {
    background: rgba(255, 255, 255, 0.3);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    opacity: 1;
    z-index: 9;
    pointer-events: none;
}
.overlay-anim:hover:after {
    height: 100%;
    opacity: 0;
    -webkit-transition: all 400ms linear;
    transition: all 400ms linear;
}
.founder-info img{
    padding: 3px;
}

   

Breadcrumb Link CSS


/*Breadcrumb Link CSS*/
.page-breadcrumb a .elementor-icon-list-text{
        color: var(--theme-color2) !important;
}
.page-breadcrumb a:hover .elementor-icon-list-text{
        color: var(--theme-color3) !important;
}

   

Breadcrumb IconList CSS


/*Breadcrumb Link CSS*/
.page-breadcrumb a .elementor-icon-list-text{
        color: var(--theme-color2) !important;
}
.page-breadcrumb a:hover .elementor-icon-list-text{
        color: var(--theme-color3) !important;
}

   

Breadcrumb IconList Class


page-breadcrumb

   

Additional Service CSS


/*Additional Service*/
.service-block .service-box:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    content: "";
    z-index: 0;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}
.service-block .service-box .round, .service-block .service-box img, .service-block .service-box .elementor-heading-title{
    transition: all 300ms linear;
}
.service-block .service-box:hover:after{
    height: 0;
}
.service-block .service-box:hover .round{
    opacity: 0.1!important;
}
.service-block .service-box:hover img{
    filter: brightness(0) invert(1);;
}
.service-block .service-box:hover .elementor-heading-title{
    color: #fff;
}

   

Additional Service Classes


***Parent Container***
service-block

***Single Block***
service-box

***Spacer widget***
round

   

Animation Classes


animationFramesOne
contactSwimmer
rotateme

   

Animation Classes


animationFramesOne
contactSwimmer
rotateme

   

Animation Classes


animationFramesOne
contactSwimmer
rotateme

   

IMPORTANT LINKS
IMPORTANT LINKS

Hero section Image Animation Set


.shape-img2 {
    -webkit-animation-name: rotateMe;
    animation-name: rotateMe;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

.shape-img3{
    -webkit-animation-name: rotateMe;
    animation-name: rotateMe;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.shape-img4{
	-webkit-animation: animationFramesTwo 20s infinite linear;
    animation: animationFramesTwo 20s infinite linear;
}


.shape-img5 {
    
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;

}


.shape-img7{
      -webkit-animation: moveBounce 5s linear infinite;
          animation: moveBounce 5s linear infinite;
}

.shape-img8{
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    -webkit-animation: moveLeftBounce 5s linear infinite;
    animation: moveLeftBounce 5s linear infinite;
}

.shape-img9{
    -webkit-animation: moveScale 3s linear infinite;
    animation: moveScale 3s linear infinite;

}

.shape-img10{
    
    -webkit-animation: animationFramesOne 20s infinite linear;
    animation: animationFramesOne 20s infinite linear;
}

Animation Keyframes


@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
            transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
            transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
            transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
            transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}


@keyframes moveLeftBounce {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes rotateMe {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


@keyframes moveBounce {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}


@keyframes moveScale {
  0% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
  50% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}

@keyframes animationFramesTwo {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(-73px, 1px) rotate(-36deg);
            transform: translate(-73px, 1px) rotate(-36deg);
  }
  40% {
    -webkit-transform: translate(-141px, -72px) rotate(-72deg);
            transform: translate(-141px, -72px) rotate(-72deg);
  }
  60% {
    -webkit-transform: translate(-83px, -122px) rotate(-108deg);
            transform: translate(-83px, -122px) rotate(-108deg);
  }
  80% {
    -webkit-transform: translate(40px, -72px) rotate(-144deg);
            transform: translate(40px, -72px) rotate(-144deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
            transform: translate(0px, 0px) rotate(0deg);
  }
}

Box Item Hover Effect


.single-featured-box{
        -webkit-transition: 0.5s;
    transition: 0.5s;
}


.single-featured-box:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
    
.single-featured-box:hover .elementor-button{
    -webkit-box-shadow: 0 5px 28.5px 1.5px rgba(0, 0, 255, 0.2);
    box-shadow: 0 5px 28.5px 1.5px rgba(0, 0, 255, 0.2);
    color: #fff !important;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

Service Section (Home Page)


.featured-box-services:hover .elementor-button{
    background-color: #0000ff!important;
}

What We Do Section (Home Page)


.featured-box:hover h3, .featured-box:hover p{
    color: #fff !important;
}

Countdown (Home+About Page)


.back-text{
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    opacity: .13;
}

.single-fun-facts:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    border-color: #ffffff !important;
}


.countmeter .elementor-counter-number-suffix{
    font-size: 18px;
    margin-left: 2px;
    margin-top: 5px;
}

Digital Ex. Section (About Page)


.features-list:hover .elementor-icon{
    background-color: #FA7070!important;
}

.features-list:hover .elementor-icon-box-title{
    color: #fff !important;
}

History Section (About Page)


.about-text h2:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5px;
    width: 50px;
    height: 1px;
    background-color: #0000ff;
}

Footer CSS


.footer-widget h2::before {
    bottom: -0.5px;
    left: 0;
    width: 55px;
    height: 1px;
    background-color: #ffffff;
    content: '';
    position: absolute;
}

Header Snippet inside HTML Widget
IMPORTANT LINKS

Floating Animation CSS

@keyframes animationFramesOne {
  0% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  20% {
    transform:  translate(73px,-1px)  rotate(36deg) ;
  }
  40% {
    transform:  translate(141px,72px)  rotate(72deg) ;
  }
  60% {
    transform:  translate(83px,122px)  rotate(108deg) ;
  }
  80% {
    transform:  translate(-40px,72px)  rotate(144deg) ;
  }
  100% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
}

@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  translate(73px,-1px)  rotate(36deg) ;
  }
  40% {
    -webkit-transform:  translate(141px,72px)  rotate(72deg) ;
  }
  60% {
    -webkit-transform:  translate(83px,122px)  rotate(108deg) ;
  }
  80% {
    -webkit-transform:  translate(-40px,72px)  rotate(144deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
}

.animationFramesOne {
	-webkit-animation: animationFramesOne 12s linear infinite;
	animation: animationFramesOne 12s linear infinite;
}
.animationFramesOne.two {
	-webkit-animation: animationFramesOne 20s linear infinite;
	animation: animationFramesOne 20s linear infinite;
}


@keyframes contactSwimmer {

  0%,
  100% {
    -webkit-transform: translateX(0) translateY(0) rotate(0);
    transform: translateX(0) translateY(0) rotate(0);
  }

  25%,
  75% {
    -webkit-transform: translateX(15px) translateY(20px) rotate(10deg);
    transform: translateX(15px) translateY(20px) rotate(10deg);
  }

  50% {
    -webkit-transform: translateX(60px) translateY(35px) rotate(15deg);
    transform: translateX(60px) translateY(35px) rotate(15deg);
  }
}

.contactSwimmer {
	-webkit-animation-name: contactSwimmer;
	animation-name: contactSwimmer;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.rotateme {
	-webkit-animation-name: rotateme;
	animation-name: rotateme;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

Animation Classes


animationFramesOne
contactSwimmer
rotateme
IMPORTANT LINKS

Clickable Phone Number

tel:+8801737999999

Clickable Email

mailto:info@youremail.com