Carousel #1
<!--online-->
<section class="mb-xl-9 my-5">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="swiper sliderSwiper">
<div class="swiper-wrapper pb-7">
<div class="swiper-slide">
<div class="card shadow-sm overflow-hidden">
<div class="row g-0">
<div class="col-xl-6 col-md-6">
<div
class="card-body h-100 d-flex align-items-start flex-column p-lg-7">
<div class="mb-3">
<small
class="text-uppercase fw-semibold ls-md">Online</small>
<h2 class="mb-0 mt-3"><a
href="#"
class="text-reset">React
- Next.js developers
events and
meetup</a></h2>
</div>
<div class="mb-5">
<small class="me-2">June 22,
2024</small>
<small>1:00PM EDT</small>
</div>
<div class="mt-auto">
<a href="./event-single.html"
class="icon-link icon-link-hover card-link">
Mode Details
<svg xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
class="bi bi-arrow-right"
viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
</path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6" style="
background-image: url(../assets/images/event/event-img-1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 15rem;
">
<!-- for mobile img-->
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow-sm overflow-hidden">
<div class="row g-0">
<div class="col-xl-6 col-md-6">
<div
class="card-body h-100 d-flex align-items-start flex-column p-lg-7">
<div class="mb-4">
<small
class="text-uppercase fw-semibold ls-md">Online</small>
<h2 class="mb-0 mt-3"><a
href="#"
class="text-reset">React
- Next.js developers
events and
meetup</a></h2>
</div>
<div class="mb-5">
<small class="me-2">June 22,
2024</small>
<small>1:00PM EDT</small>
</div>
<div class="mt-auto">
<a href="./event-single.html"
class="icon-link icon-link-hover card-link">
Mode Details
<svg xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
class="bi bi-arrow-right"
viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
</path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6" style="
background-image: url(../assets/images/event/event-img-2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 15rem;
">
<!-- for mobile img-->
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card shadow-sm overflow-hidden">
<div class="row g-0">
<div class="col-xl-6 col-md-6">
<div
class="card-body h-100 d-flex align-items-start flex-column p-lg-7">
<div class="mb-4">
<small
class="text-uppercase fw-semibold ls-md">Online</small>
<h2 class="mb-0 mt-3"><a
href="#"
class="text-reset">React
- Next.js developers
events and
meetup</a></h2>
</div>
<div class="mb-5">
<small class="me-2">June 22,
2024</small>
<small>1:00PM EDT</small>
</div>
<div class="mt-auto">
<a href="./event-single.html"
class="icon-link icon-link-hover card-link">
Mode Details
<svg xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
fill="currentColor"
class="bi bi-arrow-right"
viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
</path>
</svg>
</a>
</div>
</div>
</div>
<div class="col-md-6" style="
background-image: url(../assets/images/event/event-img-3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 15rem;
">
<!-- for mobile img-->
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section>
<!--online-->Carousel #2
portfolio
Our favourite portfolio project.
We’ll design a beautiful, scalable, and modular website that your design team will drool over and marketing team will thank you for.
- Design discovery workshop
- Conversion focused design
- Responsive across major breakpoints
- Comprehensive design documentation
<!--Portfolio project start-->
<section class="my-lg-7 py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="mb-6 mb-lg-0">
<small
class="text-primary text-uppercase ls-md fw-bold">portfolio</small>
<div class="my-4">
<h2 class="mb-3">Our favourite portfolio project.
</h2>
<p class="lead mb-0">We’ll design a beautiful,
scalable, and modular website that your design
team will drool over and marketing team will
thank you for.</p>
</div>
<ul class="list-unstyled mb-0">
<li class="d-flex mb-2">
<span>
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16"
fill="currentColor"
class="bi bi-check-circle-fill text-success text-opacity-50"
viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</span>
<span class="ms-2">Design discovery
workshop</span>
</li>
<li class="d-flex mb-2">
<span>
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16"
fill="currentColor"
class="bi bi-check-circle-fill text-success text-opacity-50"
viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</span>
<span class="ms-2">Conversion focused
design</span>
</li>
<li class="d-flex mb-2">
<span>
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16"
fill="currentColor"
class="bi bi-check-circle-fill text-success text-opacity-50"
viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</span>
<span class="ms-2">Responsive across major
breakpoints</span>
</li>
<li class="d-flex mb-2">
<span>
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16"
fill="currentColor"
class="bi bi-check-circle-fill text-success text-opacity-50"
viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg>
</span>
<span class="ms-2">Comprehensive design
documentation</span>
</li>
</ul>
</div>
</div>
<div class="col-lg-5 offset-lg-1">
<div class="swiper sliderSwiper">
<div class="swiper-wrapper pb-8">
<div class="swiper-slide">
<img src="../assets/images/service/project-small-img-1.jpg"
alt="project" class="img-fluid rounded-3" />
</div>
<div class="swiper-slide">
<img src="../assets/images/service/project-small-img-2.jpg"
alt="project" class="img-fluid rounded-3" />
</div>
<div class="swiper-slide">
<img src="../assets/images/service/project-small-img-3.jpg"
alt="project" class="img-fluid rounded-3" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section>
<!--Portfolio project end-->