happychin-web/pages/event/carousel.vue

<template>
  <Preloader></Preloader>
  <FixArea></FixArea>
  <Header-top-section sectionClass="header-top-section-4" />
  <TopHeader headerClass="header-4" />
  <div class="search-wrap">
    <div class="search-inner">
      <i class="fas fa-times search-close" id="search-close"></i>
      <div class="search-cell">
        <form method="get">
          <div class="search-field-holder">
            <input type="search" class="main-search-input" placeholder="Search..." />
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.svg')">
    <div class="line-shape">
      <img src="/picture/line1.png" alt="shape-img" />
    </div>
    <div class="plane-shape float-bob-y">
      <img src="/picture/plane2.png" alt="shape-img" />
    </div>
    <div class="doll-shape float-bob-x">
      <img src="/picture/doll.png" alt="shape-img" />
    </div>
    <div class="parasuit-shape float-bob-y">
      <img src="/picture/parasuit1.png" alt="shape-img" />
    </div>
    <div class="frame-shape">
      <img src="/picture/frame3.png" alt="shape-img" />
    </div>
    <div class="bee-shape float-bob-x">
      <img src="/picture/bee1.png" alt="shape-img" />
    </div>
    <div class="container">
      <div class="page-heading">
        <h1 class="wow fadeInUp" data-wow-delay=".3s">Event Carousel</h1>
        <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
          <li>
            <a href="p9wfc14694.html">Home</a>
          </li>
          <li>
            <i class="fas fa-chevron-right"></i>
          </li>
          <li>Event Carousel</li>
        </ul>
      </div>
    </div>
  </div>
  <section class="event-section-2 fix section-padding">
    <div class="container">
      <div class="swiper event-slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="event-box-items mt-0 box-shadow style-bottom">
              <div class="event-image">
                <img src="/picture/013.jpg" alt="event-img" />
                <div class="event-shape">
                  <img src="/picture/shape1.png" alt="shape-img" />
                </div>
                <ul class="post-date">
                  <li>
                    <img src="/picture/calender.svg" alt="img" class="me-2" />
                    Jan 16, 2024
                  </li>
                </ul>
              </div>
              <div class="event-content">
                <ul>
                  <li>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewbox="0 0 16 16"
                      fill="none"
                    >
                      <path
                        d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
                        fill="#F39F5F"
                      ></path>
                      <path
                        d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
                        fill="#F39F5F"
                      ></path>
                    </svg>
                    <span>6391 Elgin St. Celina, USA</span>
                  </li>
                </ul>
                <h3>
                  <a href="event-details.html">Last Day of School end of Year Picnic</a>
                </h3>
                <div class="event-author">
                  <a href="event-details.html" class="theme-btn">
                    Get Ticket
                    <i class="fa-solid fa-arrow-right-long"></i>
                  </a>
                  <div class="author-ratting">
                    <span>(10 Review)</span>
                    <div class="star">
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star color-1"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="event-box-items mt-0 box-shadow style-bottom">
              <div class="event-image">
                <img src="/picture/023.jpg" alt="event-img" />
                <div class="event-shape">
                  <img src="/picture/shape1.png" alt="shape-img" />
                </div>
                <ul class="post-date">
                  <li>
                    <img src="/picture/calender.svg" alt="img" class="me-2" />
                    Feb 20, 2024
                  </li>
                </ul>
              </div>
              <div class="event-content">
                <ul>
                  <li>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewbox="0 0 16 16"
                      fill="none"
                    >
                      <path
                        d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
                        fill="#F39F5F"
                      ></path>
                      <path
                        d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
                        fill="#F39F5F"
                      ></path>
                    </svg>
                    <span>6391 Elgin St. Celina, USA</span>
                  </li>
                </ul>
                <h3>
                  <a href="event-details.html">The complete web developer guideline 2024</a>
                </h3>
                <div class="event-author">
                  <a href="event-details.html" class="theme-btn">
                    Get Ticket
                    <i class="fa-solid fa-arrow-right-long"></i>
                  </a>
                  <div class="author-ratting">
                    <span>(10 Review)</span>
                    <div class="star">
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star color-1"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="event-box-items mt-0 box-shadow style-bottom">
              <div class="event-image">
                <img src="/picture/033.jpg" alt="event-img" />
                <div class="event-shape">
                  <img src="/picture/shape1.png" alt="shape-img" />
                </div>
                <ul class="post-date">
                  <li>
                    <img src="/picture/calender.svg" alt="img" class="me-2" />
                    Mar 26, 2024
                  </li>
                </ul>
              </div>
              <div class="event-content">
                <ul>
                  <li>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewbox="0 0 16 16"
                      fill="none"
                    >
                      <path
                        d="M12.7847 1.98206C11.5066 .703906 9.80717 0 7.99961 0C6.19205 0 4.49261 .703906 3.21448 1.98206C1.93633 3.26025 1.23242 4.95962 1.23242 6.76716C1.23242 10.4238 4.68986 13.4652 6.54733 15.0991C6.80545 15.3262 7.02836 15.5223 7.20595 15.6882C7.42845 15.896 7.71405 15.9999 7.99958 15.9999C8.28517 15.9999 8.5707 15.896 8.79324 15.6882C8.97083 15.5223 9.19374 15.3262 9.45186 15.0991C11.3093 13.4652 14.7668 10.4238 14.7668 6.76716C14.7667 4.95962 14.0629 3.26025 12.7847 1.98206ZM8.8328 14.3954C8.56902 14.6275 8.34124 14.8279 8.15342 15.0033C8.06714 15.0838 7.93202 15.0838 7.8457 15.0033C7.65792 14.8278 7.43011 14.6274 7.16633 14.3954C5.42008 12.8593 2.16961 9.99997 2.16961 6.76719C2.16961 3.55256 4.78489 .937281 7.99955 .937281C11.2142 .937281 13.8295 3.55256 13.8295 6.76719C13.8295 9.99997 10.579 12.8593 8.8328 14.3954Z"
                        fill="#F39F5F"
                      ></path>
                      <path
                        d="M7.9998 3.5293C6.35539 3.5293 5.01758 4.86708 5.01758 6.51148C5.01758 8.15589 6.35539 9.49367 7.9998 9.49367C9.6442 9.49367 10.982 8.15589 10.982 6.51148C10.982 4.86708 9.6442 3.5293 7.9998 3.5293ZM7.9998 8.55639C6.8722 8.55639 5.95483 7.63902 5.95483 6.51145C5.95483 5.38389 6.8722 4.46652 7.9998 4.46652C9.12739 4.46652 10.0447 5.38389 10.0447 6.51145C10.0447 7.63902 9.12739 8.55639 7.9998 8.55639Z"
                        fill="#F39F5F"
                      ></path>
                    </svg>
                    <span>6391 Elgin St. Celina, USA</span>
                  </li>
                </ul>
                <h3>
                  <a href="event-details.html">Gathering & welcome speech marketing strategy</a>
                </h3>
                <div class="event-author">
                  <a href="event-details.html" class="theme-btn">
                    Get Ticket
                    <i class="fa-solid fa-arrow-right-long"></i>
                  </a>
                  <div class="author-ratting">
                    <span>(10 Review)</span>
                    <div class="star">
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star color-1"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-dot text-center mb-55">
          <div class="dot"></div>
        </div>
      </div>
    </div>
  </section>
  <FooterSection></FooterSection>
</template>