Carousel #1
<div
class="swiper-container swiper"
id="swiper-1"
data-pagination-type=""
data-speed="400"
data-space-between="100"
data-pagination="true"
data-navigation="false"
data-autoplay="true"
data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView": 1}, "768": {"slidesPerView": 1}, "1024": {"slidesPerView": 1}}'>
<div class="swiper-wrapper pb-6 mx-auto">
<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>
<!-- Add more slides as needed -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>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
<div
class="swiper-container swiper"
id="swiper-1"
data-pagination-type=""
data-speed="400"
data-space-between="100"
data-pagination="true"
data-navigation="false"
data-autoplay="true"
data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView": 1}, "768": {"slidesPerView": 1}, "1024": {"slidesPerView": 1}}'>
<div class="swiper-wrapper pb-6 mx-auto">
<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>
<!-- Add more slides as needed -->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>