# Carousel Sections

About Award Blog Call to Action Clients Contact Carousel Case Study Facts FAQ Features Form Footer Hero Integration Industry Location Navbar Portfolio Pricing Process Services Team Testimonials

## Carousel #1

Online

## React - Next.js developers events and meetup

June 22, 2024 1:00PM EDT
Mode Details
Online

## React - Next.js developers events and meetup

June 22, 2024 1:00PM EDT
Mode Details
Online

## React - Next.js developers events and meetup

June 22, 2024 1:00PM EDT
Mode Details

     <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>