<section class="creative-service--slider">
<img src="https://imgpanda.com/upload/ib/I5rFWtU0Gv.png" alt="Service Slider Background" class="slider-bg">
<div class="slider-container">
<div class="slider-row">
<!-- Service Header -->
<div class="service-header">
<div class="header-col header-col-5">
<span class="service-subheading">Creative approach</span>
<h2 class="service-heading">Corporate Services</h2>
</div>
<div class="header-col header-col-5">
<p class="service-desc">We strive to develop real-world web solutions that are ideal for small to large projects with bespoke your custom project requirements.</p>
</div>
<div class="header-col header-col-2">
<!-- Add navigation buttons -->
<div class="swiper-button-next slide-btns"></div>
<div class="swiper-button-prev slide-btns"></div>
</div>
</div>
<!-- Service Container -->
<div class="creative-swiper--slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="service-column">
<img src="https://imgpanda.com/upload/ib/yHld3xrDwC.jpg" alt="">
<div class="service-overlay"></div>
<div class="service-content">
<div class="service-top">
<div class="service-tag">Flexible</div>
<span class="service-icon"><i class="fa-solid fa-bullseye"></i></span>
</div>
<div class="service-bottom">
<span class="heading-lg">Market research</span>
<span class="heading-sm--default">Competitors research</span>
<span class="heading-sm-hover">Explore Services</span>
<span class="heading-cta"><i class="fa-solid fa-arrow-right"></i></span>
</div>
<div class="gradient-bg"></div>
<div class="bg-overlay"></div>
<a href="https://www.fiverr.com/aliali44" class="service-link"></a>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="service-column">
<img src="https://imgpanda.com/upload/ib/b1jr7LctT0.jpg" alt="">
<div class="service-overlay"></div>
<div class="service-content">
<div class="service-top">
<div class="service-tag">Modern</div>
<span class="service-icon"><i class="fa-solid fa-hand-holding-dollar"></i></span>
</div>
<div class="service-bottom">
<span class="heading-lg">Business Consulting</span>
<span class="heading-sm--default">Targeted Growth</span>
<span class="heading-sm-hover">Explore Services</span>
<span class="heading-cta"><i class="fa-solid fa-arrow-right"></i></span>
</div>
<div class="gradient-bg"></div>
<div class="bg-overlay"></div>
<a href="https://www.fiverr.com/aliali44" class="service-link"></a>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide">
<div class="service-column">
<img src="https://imgpanda.com/upload/ib/Wdb45Kfr5R.jpg" alt="">
<div class="service-overlay"></div>
<div class="service-content">
<div class="service-top">
<div class="service-tag">Discover</div>
<span class="service-icon"><i class="fa-solid fa-sack-dollar"></i></span>
</div>
<div class="service-bottom">
<span class="heading-lg">Audience analysis</span>
<span class="heading-sm--default">Competitors research</span>
<span class="heading-sm-hover">Explore Services</span>
<span class="heading-cta"><i class="fa-solid fa-arrow-right"></i></span>
</div>
<div class="gradient-bg"></div>
<div class="bg-overlay"></div>
<a href="https://www.fiverr.com/aliali44" class="service-link"></a>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="swiper-slide">
<div class="service-column">
<img src="https://imgpanda.com/upload/ib/jPpAtPlzr1.jpg" alt="">
<div class="service-overlay"></div>
<div class="service-content">
<div class="service-top">
<div class="service-tag">Creativity</div>
<span class="service-icon"><i class="fa-solid fa-medal"></i></span>
</div>
<div class="service-bottom">
<span class="heading-lg">Business planning</span>
<span class="heading-sm--default">Innovative solutions</span>
<span class="heading-sm-hover">Explore Services</span>
<span class="heading-cta"><i class="fa-solid fa-arrow-right"></i></span>
</div>
<div class="gradient-bg"></div>
<div class="bg-overlay"></div>
<a href="https://www.fiverr.com/aliali44" class="service-link"></a>
</div>
</div>
</div>
<!-- Slide 5 -->
<div class="swiper-slide">
<div class="service-column">
<img src="https://imgpanda.com/upload/ib/yHld3xrDwC.jpg" alt="">
<div class="service-overlay"></div>
<div class="service-content">
<div class="service-top">
<div class="service-tag">Flexible</div>
<span class="service-icon"><i class="fa-solid fa-bullseye"></i></span>
</div>
<div class="service-bottom">
<span class="heading-lg">Market research</span>
<span class="heading-sm--default">Competitors research</span>
<span class="heading-sm-hover">Explore Services</span>
<span class="heading-cta"><i class="fa-solid fa-arrow-right"></i></span>
</div>
<div class="gradient-bg"></div>
<div class="bg-overlay"></div>
<a href="https://www.fiverr.com/aliali44" class="service-link"></a>
</div>
</div>
</div>
<!-- Slide 6 -->
<div class="swiper-slide">
<div class="service-column">
<img src="https://imgpanda.com/upload/ib/b1jr7LctT0.jpg" alt="">
<div class="service-overlay"></div>
<div class="service-content">
<div class="service-top">
<div class="service-tag">Modern</div>
<span class="service-icon"><i class="fa-solid fa-hand-holding-dollar"></i></span>
</div>
<div class="service-bottom">
<span class="heading-lg">Business Consulting</span>
<span class="heading-sm--default">Targeted Growth</span>
<span class="heading-sm-hover">Explore Services</span>
<span class="heading-cta"><i class="fa-solid fa-arrow-right"></i></span>
</div>
<div class="gradient-bg"></div>
<div class="bg-overlay"></div>
<a href="https://www.fiverr.com/aliali44" class="service-link"></a>
</div>
</div>
</div>
<!-- Slide 7 -->
<div class="swiper-slide">
<div class="service-column">
<img src="https://imgpanda.com/upload/ib/Wdb45Kfr5R.jpg" alt="">
<div class="service-overlay"></div>
<div class="service-content">
<div class="service-top">
<div class="service-tag">Discover</div>
<span class="service-icon"><i class="fa-solid fa-sack-dollar"></i></span>
</div>
<div class="service-bottom">
<span class="heading-lg">Audience analysis</span>
<span class="heading-sm--default">Competitors research</span>
<span class="heading-sm-hover">Explore Services</span>
<span class="heading-cta"><i class="fa-solid fa-arrow-right"></i></span>
</div>
<div class="gradient-bg"></div>
<div class="bg-overlay"></div>
<a href="https://www.fiverr.com/aliali44" class="service-link"></a>
</div>
</div>
</div>
<!-- Slide 8 -->
<div class="swiper-slide">
<div class="service-column">
<img src="https://imgpanda.com/upload/ib/jPpAtPlzr1.jpg" alt="">
<div class="service-overlay"></div>
<div class="service-content">
<div class="service-top">
<div class="service-tag">Creativity</div>
<span class="service-icon"><i class="fa-solid fa-medal"></i></span>
</div>
<div class="service-bottom">
<span class="heading-lg">Business planning</span>
<span class="heading-sm--default">Innovative solutions</span>
<span class="heading-sm-hover">Explore Services</span>
<span class="heading-cta"><i class="fa-solid fa-arrow-right"></i></span>
</div>
<div class="gradient-bg"></div>
<div class="bg-overlay"></div>
<a href="https://www.fiverr.com/aliali44" class="service-link"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stick Footer -->
<footer class="sticky-footer">
<div class="container">
<div class="footer-row">
<div class="creditd"><a href="https://www.fiverr.com/creativesalahu/customize-or-fix-your-wordpress-website-errors-and-bugs" title="Contact on Fiverr">Want to integrate this design into a WordPress website?</a></div>
<div class="social">
<ul>
<li>
<a href="https://www.fiverr.com/aliali44" title="Fiverr"><img src="https://img.icons8.com/?size=100&id=ngc6JsBomclm&format=png&color=000000" alt="Contact on Fiverr"></a></li>
<li>
<a href="https://www.upwork.com/freelancers/~018d2497192b640611" title="Upwork">
<img src="https://img.icons8.com/?size=100&id=whwDjQbvJcmB&format=png&color=000000" alt="Contact on Upwork">
</a>
</li>
<li><a href="https://www.linkedin.com/in/salahudeen-447a961b1/" title="LinkedIn"><img src="https://img.icons8.com/?size=100&id=xuvGCOXi8Wyg&format=png&color=000000" alt="Contact on LinkedIn"></a></li>
</ul>
</div>
</div>
</div>
</footer>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
body{
font-size: 17px;
line-height: 30px;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
word-break: break-word;
-webkit-font-smoothing: antialiased;
font-family: "Plus Jakarta Sans", sans-serif;
margin: 0;
overflow-x: hidden;
background: #eee;
}
body, div {
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
/* ====== Service Slider ======= */
.creative-service--slider{
background-color: #162340;
padding: 90px 0px;
}
.creative-service--slider .slider-bg{
position: absolute;
top: -150px;
left: -30px;
}
.slider-container {
max-width: 1220px;
padding-right: 15px;
padding-left: 15px;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.service-header {
position: relative;
z-index: 9;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 6%;
}
.service-header .header-col-5 {
flex: 0 0 auto;
width: 44%;
}
.header-col.header-col-2 {
position: relative;
flex: 0 0 auto;
width: 12%;
display: flex;
align-items: center;
justify-content: center;
}
.service-header .header-col .service-subheading {
background: -webkit-linear-gradient(right, rgba(17, 27, 50, 1.0), rgba(255, 255, 255, 0.0));
background: linear-gradient(to right, rgba(17, 27, 50, 1.0), rgba(255, 255, 255, 0.0));
color: #fff;
text-transform: uppercase;
line-height: 42px;
font-weight: 600;
padding: 0px 25px;
text-align: left;
font-size: 13px;
border-radius: 100px;
margin-bottom: 10px;
display: inline-block;
}
.service-header .header-col .service-heading{
color: #fff;
margin: 0px;
font-weight: 700;
font-size: 2.813rem;
line-height: 3.125rem;
letter-spacing: -1px;
}
.service-header .header-col .service-desc{
width: 85%;
color: #878898;
font-size: 17px;
line-height: 32px;
margin: 0;
}
.header-col .slide-btns{
width: 54px;
height: 54px;
background: 0 0;
border: 1px solid rgba(255, 255, 255, .2);
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
border-radius: 50%;
font-size: 16px;
font-weight: 900;
position: relative;
margin-top: 0px;
}
.slide-btns.swiper-button-next:after, .slide-btns.swiper-button-prev:after{
font-size: 16px;
font-weight: 900;
color: #fff;
}
.header-col .slide-btns:hover{
border: 1px solid #fff;
background: #fff;
}
.header-col .slide-btns:hover:after{
color: #232323;
}
.creative-swiper--slider{
margin-right: -10vw;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide .service-column {
position: relative;
overflow: hidden;
border-radius: 6px;
}
.swiper-slide .service-column img{
-webkit-transition: all 1.5s cubic-bezier(.19,1,.22,1);
transition: all 1.5s cubic-bezier(.19,1,.22,1);
max-width: 100%;
height: auto;
}
.swiper-slide .service-column .service-overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.2;
background: #262b35;
}
.swiper-slide .service-column:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.swiper-slide .service-column .service-content {
position: absolute;
top: 0;
padding: 13% 15%;
display: flex;
align-items: flex-start;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: space-between;
}
.service-column .service-content .service-top {
position: relative;
z-index: 1;
}
.service-content .service-top .service-tag{
-webkit-transition: .3s cubic-bezier(.12,0,.39,0);
transition: .3s cubic-bezier(.12,0,.39,0);
background: #3c2fc0;
color: #fff;
font-weight: 600;
padding-left: 20px;
padding-right: 20px;
border-radius: 30px;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 30px;
}
.swiper-slide .service-column:hover .service-tag{
opacity: 0;
margin-top: -20px;
}
.service-content .service-top .service-icon{
color: #fff;
font-size: 50px;
opacity: 0;
position: absolute;
top: 32px;
left: 0;
-webkit-transition: .3s cubic-bezier(.12,0,.39,0);
transition: .3s cubic-bezier(.12,0,.39,0);
}
.swiper-slide .service-column:hover .service-icon{
top: 0;
opacity: 1;
}
.swiper-slide .service-column .service-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
width: 100%;
z-index: 1;
overflow: hidden;
}
.service-column .service-bottom {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
width: 100%;
z-index: 1;
overflow: hidden;
}
.service-column .service-bottom .heading-lg {
font-size: 20px;
color: #fff;
font-weight: bold;
}
.service-column .service-bottom .heading-sm--default{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
opacity: .6;
visibility: visible;
will-change: transform;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: .4s cubic-bezier(.12,0,.39,0);
transition: .4s cubic-bezier(.12,0,.39,0);
color: #fff;
font-weight: 500;
letter-spacing: 0.5px;
line-height: 23px;
font-size: 13px;
text-transform: uppercase;
}
.service-column .service-bottom span.heading-sm-hover{
position: absolute;
width: auto;
left: 0;
bottom: 0;
visibility: hidden;
will-change: transform;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: .4s cubic-bezier(.12,0,.39,0);
transition: .4s cubic-bezier(.12,0,.39,0);
opacity: 0.6;
color: #fff;
font-weight: 500;
letter-spacing: 0.5px;
border-bottom: 1px solid;
line-height: 23px;
font-size: 13px;
text-transform: uppercase;
}
.service-column .service-bottom .heading-cta {
will-change: transform;
position: absolute;
right: 5px;
opacity: 0;
top: 50%;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .3s cubic-bezier(.12,0,.39,0);
transition: all .3s cubic-bezier(.12,0,.39,0);
display: flex;
align-items: center;
justify-content: center;
height: 30px;
width: 30px;
border-radius: 50%;
background: #fff;
line-height: 42px;
margin-left: 0px;
}
.swiper-slide .service-column .service-content:hover .heading-sm--default{
visibility: hidden;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
.swiper-slide .service-column .service-content:hover span.heading-sm-hover{
visibility: visible;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.swiper-slide .service-column .service-content:hover .heading-cta{
opacity: 1;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.gradient-bg {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(22 35 64)), to(transparent));
background-image: linear-gradient(to top, rgb(22 35 64) 0%, transparent 100%);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.9;
}
.bg-overlay {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(60 47 192)), to(transparent));
background-image: linear-gradient(to top, rgba(60, 47, 192, .8) 0%, transparent 100%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: all .4s cubic-bezier(.5,1,.89,1);
transition: all .4s cubic-bezier(.5,1,.89,1);
}
.swiper-slide .service-column .service-content:hover .bg-overlay{
opacity: 1;
visibility: visible;
}
.swiper-slide .service-column .service-link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
/* ======== Sticky Footer ========= */
.sticky-footer{
position: fixed;
width: 100%;
background: #333;
z-index: 999;
bottom: 0;
}
.sticky-footer .footer-row{
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
padding-right: 15px;
}
.creditd a {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.social ul{
display: flex;
list-style-type: none;
margin: 0;
padding: 0px;
column-gap: 10px;
align-items: center;
}
.social ul li a{
display: flex;
background: #fff;
height: 30px;
width: 30px;
border-radius: 4px;
align-items: center;
justify-content: center;
}
.social ul li a img{
max-width: 20px;
}
/* ======== RESPONSIVE IPAD ========= */
@media only screen and (max-width: 981px) {
.service-header{
flex-direction: column;
text-align: center;
}
.service-header .header-col-5{
width: 100%;
margin-bottom: 10px;
}
.service-header .header-col .service-desc{
width: 100%;
}
.header-col.header-col-2{
width: 100%;
}
.creative-swiper--slider {
margin-right: 0;
}
}
/* ======== RESPONSIVE Iphone ========= */
@media only screen and (max-width: 460px) {
.service-header .header-col .service-heading{
font-size: 2rem;
line-height: 2.125rem;
}
.header-col .slide-btns{
width: 42px;
height: 42px;
}
} $(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
autoplay: {
delay: 4000,
disableOnInteraction: false
},
keyboard: {
enabled: true,
onlyInViewport: true
},
breakpoints: {
1200: {
slidesPerView: 4
},
992: {
slidesPerView: 3
},
768: {
slidesPerView: 2
},
320: {
slidesPerView: 1
}
},
effect: 'slide'
});
});