carousel.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <Preloader></Preloader>
  3. <FixArea></FixArea>
  4. <Header-top-section sectionClass="header-top-section-4" />
  5. <TopHeader headerClass="header-4" />
  6. <div class="search-wrap">
  7. <div class="search-inner">
  8. <i class="fas fa-times search-close" id="search-close"></i>
  9. <div class="search-cell">
  10. <form method="get">
  11. <div class="search-field-holder">
  12. <input type="search" class="main-search-input" placeholder="Search..." />
  13. </div>
  14. </form>
  15. </div>
  16. </div>
  17. </div>
  18. <div class="breadcrumb-wrapper bg-cover" style="background-image: url('/image/breadcrumb.svg')">
  19. <div class="line-shape">
  20. <img src="/picture/line1.png" alt="shape-img" />
  21. </div>
  22. <div class="plane-shape float-bob-y">
  23. <img src="/picture/plane2.png" alt="shape-img" />
  24. </div>
  25. <div class="doll-shape float-bob-x">
  26. <img src="/picture/doll.png" alt="shape-img" />
  27. </div>
  28. <div class="parasuit-shape float-bob-y">
  29. <img src="/picture/parasuit1.png" alt="shape-img" />
  30. </div>
  31. <div class="frame-shape">
  32. <img src="/picture/frame3.png" alt="shape-img" />
  33. </div>
  34. <div class="bee-shape float-bob-x">
  35. <img src="/picture/bee1.png" alt="shape-img" />
  36. </div>
  37. <div class="container">
  38. <div class="page-heading">
  39. <h1 class="wow fadeInUp" data-wow-delay=".3s">Programs Carousel</h1>
  40. <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
  41. <li>
  42. <a href="p9wfc14694.html">Home</a>
  43. </li>
  44. <li>
  45. <i class="fas fa-chevron-right"></i>
  46. </li>
  47. <li>Programs Carousel</li>
  48. </ul>
  49. </div>
  50. </div>
  51. </div>
  52. <section class="clases-section section-padding">
  53. <div class="container">
  54. <div class="swiper clases-slider">
  55. <div class="swiper-wrapper">
  56. <div class="swiper-slide">
  57. <div class="clases-items mt-0">
  58. <div class="clases-bg style-2"></div>
  59. <div class="clases-image">
  60. <img src="/picture/013.png" alt="img" />
  61. </div>
  62. <div class="clases-content">
  63. <h4>
  64. <a href="program-details.html">English Classes</a>
  65. </h4>
  66. <p>
  67. Nulla a auctor leo. Vestibulum viverra mattis arcu
  68. <br />
  69. nec viverra. Vivamus
  70. </p>
  71. <ul class="clases-schedule">
  72. <li>
  73. <span>age</span>
  74. <br />
  75. 3-5 years
  76. </li>
  77. <li>
  78. <span>weekly</span>
  79. <br />
  80. 5 Days
  81. </li>
  82. <li>
  83. <span>time</span>
  84. <br />
  85. 4.30 Hors
  86. </li>
  87. </ul>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="swiper-slide">
  92. <div class="clases-items mt-0">
  93. <div class="clases-bg style-2"></div>
  94. <div class="clases-image">
  95. <img src="/picture/023.png" alt="img" />
  96. </div>
  97. <div class="clases-content">
  98. <h4>
  99. <a href="program-details.html">Tutoring Individual</a>
  100. </h4>
  101. <p>
  102. Nulla a auctor leo. Vestibulum viverra mattis arcu
  103. <br />
  104. nec viverra. Vivamus
  105. </p>
  106. <ul class="clases-schedule">
  107. <li>
  108. <span>age</span>
  109. <br />
  110. 3-5 years
  111. </li>
  112. <li>
  113. <span>weekly</span>
  114. <br />
  115. 5 Days
  116. </li>
  117. <li>
  118. <span>time</span>
  119. <br />
  120. 4.30 Hors
  121. </li>
  122. </ul>
  123. </div>
  124. </div>
  125. </div>
  126. <div class="swiper-slide">
  127. <div class="clases-items mt-0">
  128. <div class="clases-bg style-2"></div>
  129. <div class="clases-image">
  130. <img src="/picture/031.png" alt="img" />
  131. </div>
  132. <div class="clases-content">
  133. <h4>
  134. <a href="program-details.html">Tutoring Online</a>
  135. </h4>
  136. <p>
  137. Nulla a auctor leo. Vestibulum viverra mattis arcu
  138. <br />
  139. nec viverra. Vivamus
  140. </p>
  141. <ul class="clases-schedule">
  142. <li>
  143. <span>age</span>
  144. <br />
  145. 3-5 years
  146. </li>
  147. <li>
  148. <span>weekly</span>
  149. <br />
  150. 5 Days
  151. </li>
  152. <li>
  153. <span>time</span>
  154. <br />
  155. 4.30 Hors
  156. </li>
  157. </ul>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="swiper-dot text-center pt-5">
  163. <div class="dot"></div>
  164. </div>
  165. </div>
  166. </div>
  167. </section>
  168. <FooterSection></FooterSection>
  169. </template>