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!

How to Make a Freelancer portfolio website like fiverr (WordPress & Elementor Tutorial for Beginners)

Subscribe To My YouTube Channel For More Upcoming Videos

IMPORTANT LINKS

Hide horizontal overflow for the entire page CSS

 

Button Style CSS



/* ============== */
/* CTA Button */
/* ============== */

.cta-button-orrange .elementor-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var( --e-global-color-accent );!i;!;!;!i;!;
    height: 100%;
    width: 50.5%;
    transform: scaleX(1);
    transform-origin: right;
    z-index: -1;
    transition: all .5s;
}

.cta-button-orrange .elementor-button {
    position: relative;
    z-index: 0;
}

.cta-button-orrange .elementor-button::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: var( --e-global-color-accent );
    height: 100%;
    width: 50.5%;
    transform: scaleX(1);
    z-index: -1;
    transition: all .5s;
    transform-origin: left;
}
.cta-button-orrange .elementor-button:hover::before, .cta-button-orrange .elementor-button:hover::after {
    transform: scaleX(0);
}
.cta-button-orrange .elementor-button:hover{
    color: var( --e-global-color-accent );
}

 

Button Style CSS Class


cta-button-orrange

 

Counter Item Style CSS


.counter-item::before {
    clip-path: polygon(0 61%, 100% 0, 100% 100%, 0% 100%);
}

.counter-item .elementor-counter-number-wrapper .elementor-counter-number-suffix {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}

.counter-item .elementor-counter-number-wrapper {
    align-items: baseline;
}

 

Counter Item Style CSS Class


counter-item

 

Icon Shadow & Animation Style CSS


.icon-shadow .elementor-social-icons-wrapper .elementor-icon {
    box-shadow: 12px 12px 20px rgba(3, 39, 55, 0.08);
    transition: all .5s;
}


.icon-shadow .elementor-social-icons-wrapper .elementor-icon:hover svg path{
    fill: #fff !important;
}



.icon-box-shadow-banner::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:rgba(255, 255, 255, 0.2);
    width: 66px;
    height: 66px;
    z-index: -1;
    box-shadow:1.13636px 4.54545px 40px rgba(5, 88, 85, 0.4);
}

 .shadow-yellow::before{
     box-shadow: 1.13636px 4.54545px 40px rgba(240, 185, 48, 0.4); 
 }
 
  .shadow-orrange::before{
     box-shadow: 1.13636px 4.54545px 40px rgba(240, 75, 33, 0.4);
 }

.icon-box-shadow-banner {
    animation: grow 3s ease-in infinite alternate;
}
.anim-delay-2ms{
    animation-delay: .2s;
}
.anim-delay-4ms{
    animation-delay: .4s;
}
@keyframes grow{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(.7);
    }
}


@media (max-width: 767.98px){
    .icon-box-shadow-banner::before {
    width: 60px;
    height: 60px;
}
}

 

Icon Shadow Style CSS Classes


icon-shadow
anim-delay-2ms
anim-delay-4ms
shadow-orrange
shadow-yellow
icon-box-shadow-banner

 

Zoom Effect Animation CSS


.zoom-in-out {
    animation: zoom-in-out 10s ease-in infinite alternate;
}
@keyframes zoom-in-out{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(.8);
    }
}

 

Zoom Effect Animation CSS Class


zoom-in-out

 

About Section Social Icon CSS


 .icon-box-shadow-banner-2::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:rgba(255, 255, 255, 0.12);
    width: 82px;
    height: 82px;
    z-index: -1;
    box-shadow: 1.13636px 4.54545px 40px rgba(240, 75, 33, 0.4);
}

.icon-box-shadow-banner-2 {
    animation: grow 3s ease-in infinite alternate;
}

 

About Section Social Icon CSS Class


icon-box-shadow-banner-2

 

Portfolio Item Shine Effect CSS


.portfolio-item .shine-effect img{
    transition: all .5s;
}
.portfolio-item:hover .shine-effect img{
    transform: scale(1.2); 
}
.portfolio-item .shine-effect {
	position: relative;
}

.portfolio-item .shine-effect::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.portfolio-item:hover .shine-effect::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

 

Portfolio Item Shine Effect CSS Style Classes


portfolio-item
shine-effect

 

Portfolio Item Icon Style CSS


.portfolio-item .elementor-icon:hover {
    border: 1px solid var( --e-global-color-accent );
}

.portfolio-item .elementor-icon:hover svg path {
    stroke: var( --e-global-color-accent );
}

.portfolio-item .elementor-icon{
    transition: all .3s;
    border: 1px solid transparent;
}

 

Portfolio Item Icon Style CSS Class


portfolio-item

 

Reviews Image Overlay Style Css


.img-overlay-1 {
    position: relative;
}

.img-overlay-1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 39, 55, 0.5);
    border-radius: 50%;
}

.img-overlay-2 {
    position: relative;
}

.img-overlay-2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 39, 55, 0.25);
    border-radius: 50%;
}

 

Reviews Image Overlay Style Css Classes


img-overlay-1
img-overlay-2

 

Testimonial Carousel Style CSS



.testimonial-carousel .tns-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -95px;
}
.testimonial-carousel .tns-controls button span {
    height: 48px;
}
.testimonial-carousel .tns-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -95px;
    gap: 16px;
    display: flex
;
}
.testimonial-carousel .tns-controls button span {
    transition: all .5s;
}

.testimonial-carousel .tns-controls button:hover span svg path{
    stroke: #fff;
}
.comment-bio {
    display: none;
}

 

Testimonial Carousel Style CSS Class


testimonial-carousel

 

Blog Grid Style CSS


/* ============== */
/* Blog Grid */
/* ============== */


.blog-grid .jkit-postblock-content {
    display: flex
;
    flex-direction: column;
}

.blog-grid .jkit-post-excerpt {
    border-bottom: 1px dashed #E4E5E7;
    padding-bottom: 32px;
}
.blog-grid .jkit-post-meta {
    justify-content: start !important;
}
a{
    text-decoration: none !important;
}

.blog-grid .jkit-post:hover {
    border-color: #f04b214d !important;
    transform: translateY(-4px);
}

.blog-grid .jkit-post {
    transition: all .4s ease-in-out;
}

.blog-grid .jkit-post:hover .thumbnail-container {
    filter: blur(2px);
}

.blog-grid .jkit-post:hover .thumbnail-container {
    transition: all .4s ease;
}

 

Blog Grid Style CSS Class


blog-grid

 

Single Banner Icon Style CSS


.icon-box-shadow-banner::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:rgba(255, 255, 255, 0.12);
    width: 66px;
    height: 66px;
    z-index: -1;
    box-shadow: 1.13636px 12px 64px rgba(240, 75, 33, 0.32);
}

.icon-box-shadow-banner {
    animation: grow 3s ease-in infinite alternate;
}
.anim-delay-2ms{
    animation-delay: .2s;
}
.anim-delay-4ms{
    animation-delay: .4s;
}
.anim-delay-6ms{
    animation-delay: .6s;
}
@keyframes grow{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(.7);
    }
}

 

Single Banner Icon Style CSS Classes


icon-box-shadow-banner
anim-delay-2ms
anim-delay-4ms
anim-delay-6ms

 

Timeline(Single Gig Page) Style CSS Classes


.number {
    height: 48px;
    background: #fff
}

.number .elementor-widget-container {
    justify-content: center;
    display: flex
;
    align-items: center;
}

.line-shape::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #E4E5E7;
}

@media (max-width: 767.98px){
    .line-shape::before {
   display: none;
}
}

 

Timeline(Single Gig Page) Style CSS Classes



number
line-shape

 

Timeline(Single Gig Page) Style CSS Classes



number
line-shape

 

Get Started Button Style CSS



.get-started-btn .elementor-button-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

 

Get Started Button Style CSS Classes



get-started-btn