index-two.vue 67 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034
  1. <template>
  2. <!-- <div id="preloader" class="preloader">
  3. <div class="animation-preloader">
  4. <div class="spinner"></div>
  5. <div class="txt-loading"><span data-text-preloader="K" class="letters-loading">K </span><span
  6. data-text-preloader="I" class="letters-loading">I </span><span data-text-preloader="D"
  7. class="letters-loading">D </span><span data-text-preloader="S" class="letters-loading">S
  8. </span><span data-text-preloader="A" class="letters-loading">A </span></div>
  9. <p class="text-center">Loading</p>
  10. </div>
  11. <div class="loader">
  12. <div class="row">
  13. <div class="col-3 loader-section section-left">
  14. <div class="bg"></div>
  15. </div>
  16. <div class="col-3 loader-section section-left">
  17. <div class="bg"></div>
  18. </div>
  19. <div class="col-3 loader-section section-right">
  20. <div class="bg"></div>
  21. </div>
  22. <div class="col-3 loader-section section-right">
  23. <div class="bg"></div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="fix-area">
  29. <div class="offcanvas__info">
  30. <div class="offcanvas__wrapper">
  31. <div class="offcanvas__content">
  32. <div class="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
  33. <div class="offcanvas__logo"><a href="p9wfc14694.html"><img src="/picture/logo.svg"
  34. alt="logo-img"></a></div>
  35. <div class="offcanvas__close"><button><i class="fas fa-times"></i></button></div>
  36. </div>
  37. <p class="text d-none d-xl-block">Nullam dignissim,ante scelerisque the is euismod fermentum odio
  38. sem semper the is erat,a feugiat leo urna eget eros. Duis Aenean a imperdiet risus. </p>
  39. <div class="mobile-menu fix mb-3"></div>
  40. <div class="offcanvas__contact">
  41. <h4>Contact Info</h4>
  42. <ul>
  43. <li class="d-flex align-items-center">
  44. <div class="offcanvas__contact-icon"><i class="fal fa-map-marker-alt"></i></div>
  45. <div class="offcanvas__contact-text"><a target="_blank" href="#">Main
  46. Street,Melbourne,Australia</a></div>
  47. </li>
  48. <li class="d-flex align-items-center">
  49. <div class="offcanvas__contact-icon mr-15"><i class="fal fa-envelope"></i></div>
  50. <div class="offcanvas__contact-text"><a href="mailto:info@example.com"><span
  51. class="mailto:info@example.com">info@example.com</span></a></div>
  52. </li>
  53. <li class="d-flex align-items-center">
  54. <div class="offcanvas__contact-icon mr-15"><i class="fal fa-clock"></i></div>
  55. <div class="offcanvas__contact-text"><a target="_blank" href="#">Mod-friday,09am
  56. -05pm</a></div>
  57. </li>
  58. <li class="d-flex align-items-center">
  59. <div class="offcanvas__contact-icon mr-15"><i class="far fa-phone"></i></div>
  60. <div class="offcanvas__contact-text"><a href="tel:+11002345909">+11002345909</a></div>
  61. </li>
  62. </ul>
  63. <div class="header-button mt-4"><a href="contact.html" class="theme-btn text-center"><span>Get A
  64. Quote<i class="fa-solid fa-arrow-right-long"></i></span></a></div>
  65. <div class="social-icon d-flex align-items-center"><a href="#"><i
  66. class="fab fa-facebook-f"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a
  67. href="#"><i class="fab fa-youtube"></i></a><a href="#"><i
  68. class="fab fa-linkedin-in"></i></a></div>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="offcanvas__overlay"></div> -->
  75. <Preloader></Preloader>
  76. <FixArea></FixArea>
  77. <header class="header-section">
  78. <!-- <div class="header-top-section">
  79. <div class="container">
  80. <div class="header-top-wrapper">
  81. <ul class="contact-list">
  82. <li><i class="fal fa-map-marker-alt"></i>6391 Elgin St. Celina,USA </li>
  83. <li><i class="far fa-envelope"></i><a href="mailto:info@example.com"
  84. class="link">info@example.com</a></li>
  85. </ul>
  86. <div class="social-icon d-flex align-items-center"><span>Follow Us On:</span><a href="#"><i
  87. class="fab fa-facebook-f"></i></a><a href="#"><i class="fab fa-twitter"></i></a><a
  88. href="#"><i class="fa-brands fa-linkedin-in"></i></a><a href="#"><i
  89. class="fa-brands fa-youtube"></i></a></div>
  90. </div>
  91. </div>
  92. </div> -->
  93. <Header-top-section />
  94. <TopHeader headerClass="header-2" />
  95. <!-- <div id="header-sticky" class="header-2">
  96. <div class="container">
  97. <div class="mega-menu-wrapper">
  98. <div class="header-main style-2">
  99. <div class="header-left">
  100. <div class="logo"><a href="p9wfc14694.html" class="header-logo"><img
  101. src="/picture/logo.svg" alt="logo-img"></a></div>
  102. </div>
  103. <div class="header-right d-flex justify-content-end align-items-center">
  104. <div class="mean__menu-wrapper">
  105. <div class="main-menu">
  106. <nav id="mobile-menu">
  107. <ul>
  108. <li class="has-dropdown active menu-thumb"><a href="p9wfc14694.html">Home <i
  109. class="fas fa-angle-down"></i></a>
  110. <ul class="submenu has-homemenu">
  111. <li>
  112. <div class="homemenu-items">
  113. <div class="homemenu">
  114. <div class="homemenu-thumb"><img
  115. src="/picture/home-1.jpg" alt="img">
  116. <div class="demo-button"><a href="p9wfc14694.html"
  117. class="theme-btn"><span>Multi
  118. Page</span></a><a
  119. href="index-one-page.html"
  120. class="theme-btn"><span>One Page</span></a>
  121. </div>
  122. </div>
  123. <div class="homemenu-content text-center">
  124. <h4 class="homemenu-title">Home 01 </h4>
  125. </div>
  126. </div>
  127. <div class="homemenu">
  128. <div class="homemenu-thumb mb-15"><img
  129. src="/picture/home-2.jpg" alt="img">
  130. <div class="demo-button"><a href="index-2.html"
  131. class="theme-btn"><span>Multi
  132. Page</span></a><a href=""
  133. class="theme-btn"><span>One Page</span></a>
  134. </div>
  135. </div>
  136. <div class="homemenu-content text-center">
  137. <h4 class="homemenu-title">Home 02 </h4>
  138. </div>
  139. </div>
  140. <div class="homemenu">
  141. <div class="homemenu-thumb mb-15"><img
  142. src="/picture/home-3.jpg" alt="img">
  143. <div class="demo-button"><a href="index-3.html"
  144. class="theme-btn"><span>Multi
  145. Page</span></a><a
  146. href="index-three-page.html"
  147. class="theme-btn"><span>One Page</span></a>
  148. </div>
  149. </div>
  150. <div class="homemenu-content text-center">
  151. <h4 class="homemenu-title">Home 03 </h4>
  152. </div>
  153. </div>
  154. <div class="homemenu">
  155. <div class="homemenu-thumb mb-15"><img
  156. src="/picture/home-4.jpg" alt="img">
  157. <div class="demo-button"><a href="index-4.html"
  158. class="theme-btn"><span>Multi
  159. Page</span></a><a
  160. href="index-four-page.html"
  161. class="theme-btn"><span>One Page</span></a>
  162. </div>
  163. </div>
  164. <div class="homemenu-content text-center">
  165. <h4 class="homemenu-title">Home 04 </h4>
  166. </div>
  167. </div>
  168. </div>
  169. </li>
  170. </ul>
  171. </li>
  172. <li><a href="#about">About Us</a></li>
  173. <li><a href="#programs">Programs</a></li>
  174. <li><a href="#team">Team</a></li>
  175. <li><a href="#blog">Blog</a></li>
  176. </ul>
  177. </nav>
  178. </div>
  179. </div><a href="#0" class="search-trigger search-icon"><i class="fal fa-search"></i></a>
  180. <div class="header-button"><a href="contact.html" class="theme-btn"><span>Book A visit <i
  181. class="fa-solid fa-arrow-right-long"></i></span></a></div>
  182. <div class="header__hamburger d-xl-none my-auto">
  183. <div class="sidebar__toggle"><i class="fas fa-bars"></i></div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. </div> -->
  190. </header>
  191. <div class="search-wrap">
  192. <div class="search-inner"><i class="fas fa-times search-close" id="search-close"></i>
  193. <div class="search-cell">
  194. <form method="get">
  195. <div class="search-field-holder"><input type="search" class="main-search-input"
  196. placeholder="Search..."></div>
  197. </form>
  198. </div>
  199. </div>
  200. </div>
  201. <section class="hero-section hero-2 fix">
  202. <div class="circle-shape"><img src="/picture/circle.png" alt="shape-img"></div>
  203. <div class="line-shape"><img src="/picture/line-shape.png" alt="shape-img"></div>
  204. <div class="right-shape"><img src="/picture/right-shape.png" alt="shape-img"></div>
  205. <div class="roket-shape float-bob-y"><img src="/picture/roket.png" alt="shape-img"></div>
  206. <div class="compass-shape"><img src="/picture/compass.png" alt="shape-img"></div>
  207. <div class="bus-shape float-bob-x"><img src="/picture/bus.png" alt="shape-img"></div>
  208. <div class="frame-shape"><img src="/picture/frame2.png" alt="shape-img"></div>
  209. <div class="star-shape"><img src="/picture/star-2.png" alt="shape-img"></div>
  210. <div class="pencil-shape"><img src="/picture/pencil.png" alt=""></div>
  211. <div class="container">
  212. <div class="row g-4 align-items-center">
  213. <div class="col-lg-6">
  214. <div class="hero-content">
  215. <h5 class="wow fadeInUp">Preschool & Baby Care</h5>
  216. <h1 class="wow fadeInUp" data-wow-delay=".3s">We Prepare Your <br>Child For <span>Life</span>
  217. </h1>
  218. <p class="wow fadeInUp" data-wow-delay=".5s">Suspendisse eget lectus vitae elit malesuada
  219. lacinia Vestibulum <br>scelerisque,ligula sit amet consequat</p>
  220. <div class="hero-button"><a href="index-2.html" class="theme-btn wow fadeInUp"
  221. data-wow-delay=".7s">Explore More <i class="fa-solid fa-arrow-right-long"></i></a><a
  222. href="contact.html" class="theme-btn transparent wow fadeInUp" data-wow-delay=".8s">Get
  223. In Touch <i class="fa-solid fa-arrow-right-long"></i></a></div>
  224. </div>
  225. </div>
  226. <div class="col-lg-6 wow fadeInUp" data-wow-delay=".4s">
  227. <div class="hero-image"><img src="/picture/022.png" alt="hero-img"></div>
  228. </div>
  229. </div>
  230. </div>
  231. </section>
  232. <section class="work-process-section-2 fix section-padding fix">
  233. <div class="top-shape"><img src="/picture/bottom-shape.png" alt="shape-img"></div>
  234. <div class="container">
  235. <div class="process-work-wrapper style-padding">
  236. <div class="row g-4">
  237. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
  238. <div class="work-process-items text-center">
  239. <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png');"><img
  240. src="/picture/01.svg" alt="img"></div>
  241. <div class="content">
  242. <h4>Choose A Service</h4>
  243. <p>In a free hour,when our power of choice is untrammeled and </p>
  244. </div>
  245. </div>
  246. </div>
  247. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
  248. <div class="work-process-items text-center">
  249. <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png');"><img
  250. src="/picture/02.svg" alt="img"></div>
  251. <div class="content">
  252. <h4>Expert Teachers</h4>
  253. <p>In a free hour,when our power of choice is untrammeled and </p>
  254. </div>
  255. </div>
  256. </div>
  257. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
  258. <div class="work-process-items text-center">
  259. <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png');"><img
  260. src="/picture/03.svg" alt="img"></div>
  261. <div class="content">
  262. <h4>E-Learning Media</h4>
  263. <p>In a free hour,when our power of choice is untrammeled and </p>
  264. </div>
  265. </div>
  266. </div>
  267. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
  268. <div class="work-process-items text-center">
  269. <div class="icon bg-cover" style="background-image: url('/image/icon-bg.png');"><img
  270. src="/picture/04.svg" alt="img"></div>
  271. <div class="content">
  272. <h4>Full Day Programs</h4>
  273. <p>In a free hour,when our power of choice is untrammeled and </p>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. </section>
  281. <section class="about-activities-section-2 section-padding pt-0" id="about">
  282. <div class="left-shape"><img src="/picture/left-shape.png" alt="shape-img"></div>
  283. <div class="zebra-shape float-bob-y"><img src="/picture/zebra.png" alt="shape-img"></div>
  284. <div class="bottom-shape"><img src="/picture/section-top-shape-2.png" alt="shape-img"></div>
  285. <div class="sun-shape"><img src="/picture/shape-2.png" alt="shape-img"></div>
  286. <div class="container">
  287. <div class="about-activities-wrapper style-2">
  288. <div class="row g-4">
  289. <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
  290. <div class="activities-image-items"><img src="/picture/04.png" alt="img">
  291. <div class="radius-shape"><img src="/picture/radius-shape.png" alt="shape-img"></div>
  292. <div class="circle-shape"><img src="/picture/circle1.png" alt="shape-img"></div>
  293. </div>
  294. </div>
  295. <div class="col-lg-6">
  296. <div class="activities-content">
  297. <div class="section-title"><span class="wow fadeInUp">About Us</span>
  298. <h2 class="wow fadeInUp" data-wow-delay=".3s">Learn to play,converse <br>with
  299. confidence. </h2>
  300. </div>
  301. <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s">Luctus. Curabitur nibh justo
  302. imperdiet non ex non tempus faucibus urna Aliquam at elit vitae dui sagittis maximus
  303. eget vitae diam In fermentum </p>
  304. <div class="row g-4 mt-4">
  305. <div class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".3s">
  306. <div class="icon-items">
  307. <div class="icon"><img src="/picture/icon-5.svg" alt="img"></div>
  308. <div class="content">
  309. <h5>Sport Program</h5>
  310. <p>Aliquam erat volutpat <br>nullam imperdiet</p>
  311. </div>
  312. </div>
  313. </div>
  314. <div class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".5s">
  315. <div class="icon-items">
  316. <div class="icon"><img src="/picture/icon-6.svg" alt="img"></div>
  317. <div class="content">
  318. <h5>Easy To Learn</h5>
  319. <p>Ut vehiculadictumst <br>maecenas ante.</p>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. <div class="about-author">
  325. <div class="author-image wow fadeInUp" data-wow-delay=".3s"><img
  326. src="/picture/author1.png" alt="author-img">
  327. <div class="content">
  328. <h6>Ronald Richards</h6>
  329. <p>Co,Founder</p>
  330. </div>
  331. </div>
  332. <div class="author-icon wow fadeInUp" data-wow-delay=".5s">
  333. <div class="icon"><i class="fa-solid fa-phone"></i></div>
  334. <div class="content"><span>Call Us Now</span>
  335. <h5><a href="tel:+2085550112">+208-555-0112</a></h5>
  336. </div>
  337. </div>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. </div>
  343. </div>
  344. </section>
  345. <section class="feature-value-section fix section-padding section-bg-2">
  346. <div class="shape-1"><img src="/picture/shape-1.png" alt="shape-img"></div>
  347. <div class="shape-2 float-bob-x"><img src="/picture/shape-21.png" alt="shape-img"></div>
  348. <div class="container">
  349. <div class="section-title text-center"><span class="wow fadeInUp">Our values</span>
  350. <h2 class="wow fadeInUp" data-wow-delay=".3s">The best playschool <br>for your kid</h2>
  351. </div>
  352. <div class="row">
  353. <div class="col-xl-4 col-lg-6">
  354. <div class="feature-value-items">
  355. <div class="value-icon-items wow fadeInUp" data-wow-delay=".3s">
  356. <div class="icon"><img src="/picture/icon-11.svg" alt="img"></div>
  357. <div class="content">
  358. <h5>Teacher Training and Progress </h5>
  359. <p>Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue,ut
  360. pulvinar.</p>
  361. </div>
  362. </div>
  363. <div class="value-icon-items wow fadeInUp" data-wow-delay=".5s">
  364. <div class="icon color-2"><img src="/picture/icon-21.svg" alt="img"></div>
  365. <div class="content">
  366. <h5>Nanny Selection 24/7</h5>
  367. <p>Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue,ut
  368. pulvinar.</p>
  369. </div>
  370. </div>
  371. </div>
  372. </div>
  373. <div class="col-xl-4 col-lg-6 wow fadeInUp" data-wow-delay=".4s">
  374. <div class="feature-value-items">
  375. <div class="feature-value-image"><img src="/picture/cta-2.png" alt="img">
  376. <div class="value-shape"><img src="/picture/cta-shape-2.png" alt="shape-img"></div>
  377. </div>
  378. </div>
  379. </div>
  380. <div class="col-xl-4 col-lg-6">
  381. <div class="feature-value-items">
  382. <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".3s">
  383. <div class="content">
  384. <h5>Advanced Placement Courses</h5>
  385. <p>Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue,ut
  386. pulvinar.</p>
  387. </div>
  388. <div class="icon color-3"><img src="/picture/icon-3.svg" alt="img"></div>
  389. </div>
  390. <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".5s">
  391. <div class="content">
  392. <h5>Self-contained gifted programs​</h5>
  393. <p>Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue,ut
  394. pulvinar.</p>
  395. </div>
  396. <div class="icon color-2 color-4"><img src="/picture/icon-41.svg" alt="img"></div>
  397. </div>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. </section>
  403. <section class="counter-section fix">
  404. <div class="line-shape"><img src="/picture/line-shape1.png" alt="shape-img"></div>
  405. <div class="box-shape float-bob-x"><img src="/picture/box-shape.png" alt="shape-img"></div>
  406. <div class="counter-bg"></div>
  407. <div class="container">
  408. <div class="counter-wrapper">
  409. <div class="row g-4">
  410. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
  411. <div class="counter-items">
  412. <div class="icon"><img src="/picture/icon-12.svg" alt="img"></div>
  413. <div class="content">
  414. <h2><span class="count">25</span>+</h2>
  415. <p>Year of Experience</p>
  416. </div>
  417. </div>
  418. </div>
  419. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
  420. <div class="counter-items">
  421. <div class="icon"><img src="/picture/icon-22.svg" alt="img"></div>
  422. <div class="content">
  423. <h2><span class="count">6,500</span>+</h2>
  424. <p>Class Completed</p>
  425. </div>
  426. </div>
  427. </div>
  428. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
  429. <div class="counter-items">
  430. <div class="icon"><img src="/picture/icon-31.svg" alt="img"></div>
  431. <div class="content">
  432. <h2><span class="count">100</span>+</h2>
  433. <p>Experts Instructors</p>
  434. </div>
  435. </div>
  436. </div>
  437. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
  438. <div class="counter-items border-none">
  439. <div class="icon"><img src="/picture/icon-42.svg" alt="img"></div>
  440. <div class="content">
  441. <h2><span class="count">6,561</span>+</h2>
  442. <p>Students Enroll</p>
  443. </div>
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448. </div>
  449. </section>
  450. <section class="program-section-2 section-padding fix" id="programs">
  451. <div class="line-1"><img src="/picture/line-1.png" alt="shape-img"></div>
  452. <div class="container">
  453. <div class="section-title text-center"><span class="wow fadeInUp">Our Programs</span>
  454. <h2 class="wow fadeInUp" data-wow-delay=".3s">We meet kids at their level <br>regardless of their age
  455. </h2>
  456. </div>
  457. <div class="row">
  458. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
  459. <div class="program-box-items-2">
  460. <div class="program-bg"></div>
  461. <div class="icon"><img src="/picture/011.svg" alt="icon-img"></div>
  462. <div class="content text-center">
  463. <h4><a href="program-details.html">Preschool</a></h4><span>(2-3 years)</span>
  464. <p>Consectur the adipiscing elit eiusmod. </p><a href="program-details.html"
  465. class="arrow-icon"><i class="fa-solid fa-arrow-right-long"></i></a>
  466. </div>
  467. </div>
  468. </div>
  469. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
  470. <div class="program-box-items-2">
  471. <div class="program-bg bg-2"></div>
  472. <div class="icon"><img src="/picture/021.svg" alt="icon-img"></div>
  473. <div class="content text-center">
  474. <h4><a href="program-details.html">Chemistry Class</a></h4><span>(4-5 years)</span>
  475. <p>Consectur the adipiscing elit eiusmod. </p><a href="program-details.html"
  476. class="arrow-icon color-2"><i class="fa-solid fa-arrow-right-long"></i></a>
  477. </div>
  478. </div>
  479. </div>
  480. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
  481. <div class="program-box-items-2">
  482. <div class="program-bg bg-3"></div>
  483. <div class="icon"><img src="/picture/031.svg" alt="icon-img"></div>
  484. <div class="content text-center">
  485. <h4><a href="program-details.html">Kindergarten</a></h4><span>(4-5 years)</span>
  486. <p>Consectur the adipiscing elit eiusmod. </p><a href="program-details.html"
  487. class="arrow-icon color-3"><i class="fa-solid fa-arrow-right-long"></i></a>
  488. </div>
  489. </div>
  490. </div>
  491. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
  492. <div class="program-box-items-2">
  493. <div class="program-bg bg-4"></div>
  494. <div class="icon"><img src="/picture/041.svg" alt="icon-img"></div>
  495. <div class="content text-center">
  496. <h4><a href="program-details.html">Drawing Class</a></h4><span>(1-2 years)</span>
  497. <p>Consectur the adipiscing elit eiusmod. </p><a href="program-details.html"
  498. class="arrow-icon color-4"><i class="fa-solid fa-arrow-right-long"></i></a>
  499. </div>
  500. </div>
  501. </div>
  502. </div>
  503. </div>
  504. </section>
  505. <section class="team-section-2 section-bg section-padding" id="team">
  506. <div class="top-shape"><img src="/picture/top-shape.png" alt="shape-img"></div>
  507. <div class="love-shape float-bob-y"><img src="/picture/love.png" alt="shape-img"></div>
  508. <div class="frame-shape"><img src="/picture/frame.png" alt="shape-img"></div>
  509. <div class="container">
  510. <div class="section-title-area">
  511. <div class="section-title"><span class="wow fadeInUp">Our Experts</span>
  512. <h2 class="wow fadeInUp" data-wow-delay=".3s">Our Expert Instructors</h2>
  513. </div>
  514. <div class="array-button wow fadeInUp" data-wow-delay=".5s"><button class="array-prev"><i
  515. class="fal fa-arrow-left"></i></button><button class="array-next"><i
  516. class="fal fa-arrow-right"></i></button></div>
  517. </div>
  518. <div class="swiper team-slider-2">
  519. <div class="swiper-wrapper">
  520. <div class="swiper-slide">
  521. <div class="team-box-items">
  522. <div class="team-image"><img src="/picture/05.png" alt="team-img"></div>
  523. <div class="team-content">
  524. <h3><a href="team-details.html">Leslie Alexander</a></h3>
  525. <p>Math Teacher</p>
  526. <div class="social-icon d-flex align-items-center"><a href="#"><i
  527. class="fab fa-facebook-f"></i></a><a href="#"><i
  528. class="fa-brands fa-instagram"></i></a><a href="#"><i
  529. class="fab fa-twitter"></i></a><a href="#"><i
  530. class="fab fa-pinterest-p"></i></a></div>
  531. </div>
  532. </div>
  533. </div>
  534. <div class="swiper-slide">
  535. <div class="team-box-items">
  536. <div class="team-image"><img src="/picture/06.png" alt="team-img"></div>
  537. <div class="team-content">
  538. <h3><a href="team-details.html">Esther Howard</a></h3>
  539. <p>Art Teacher</p>
  540. <div class="social-icon d-flex align-items-center"><a href="#"><i
  541. class="fab fa-facebook-f"></i></a><a href="#"><i
  542. class="fa-brands fa-instagram"></i></a><a href="#"><i
  543. class="fab fa-twitter"></i></a><a href="#"><i
  544. class="fab fa-pinterest-p"></i></a></div>
  545. </div>
  546. </div>
  547. </div>
  548. <div class="swiper-slide">
  549. <div class="team-box-items">
  550. <div class="team-image"><img src="/picture/07.png" alt="team-img"></div>
  551. <div class="team-content">
  552. <h3><a href="team-details.html">Ralph Edwards</a></h3>
  553. <p>Sport Teacher</p>
  554. <div class="social-icon d-flex align-items-center"><a href="#"><i
  555. class="fab fa-facebook-f"></i></a><a href="#"><i
  556. class="fa-brands fa-instagram"></i></a><a href="#"><i
  557. class="fab fa-twitter"></i></a><a href="#"><i
  558. class="fab fa-pinterest-p"></i></a></div>
  559. </div>
  560. </div>
  561. </div>
  562. </div>
  563. </div>
  564. </div>
  565. </section>
  566. <section class="contact-section section-padding">
  567. <div class="line-1"><img src="/picture/line-1.png" alt="shape-img"></div>
  568. <div class="line-2"><img src="/picture/line-21.png" alt="shape-img"></div>
  569. <div class="container">
  570. <div class="contact-wrapper">
  571. <div class="row">
  572. <div class="col-lg-6">
  573. <div class="contact-content">
  574. <div class="section-title"><span class="text-white wow fadeInUp">Contact with Us</span>
  575. <h2 class="text-white wow fadeInUp" data-wow-delay=".3s">How May We Help You!</h2>
  576. </div>
  577. <form action="#" id="contact-form" method="POST" class="contact-form-items">
  578. <div class="row g-4">
  579. <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
  580. <div class="form-clt"><span>Your name*</span><input type="text" name="name"
  581. id="name" placeholder="Robot fox"></div>
  582. </div>
  583. <div class="col-lg-6 wow fadeInUp" data-wow-delay=".5s">
  584. <div class="form-clt"><span>Your Email*</span><input type="text" name="email"
  585. id="email" placeholder="info@example.com"></div>
  586. </div>
  587. <div class="col-lg-12 wow fadeInUp" data-wow-delay=".7s">
  588. <div class="form-clt"><span>Message*</span><textarea name="message" id="message"
  589. placeholder="Write Message"></textarea></div>
  590. </div>
  591. <div class="col-lg-7 wow fadeInUp" data-wow-delay=".9s"><button type="submit"
  592. class="theme-btn bg-white">Send Request <i
  593. class="fa-solid fa-arrow-right-long"></i></button></div>
  594. </div>
  595. </form>
  596. </div>
  597. </div>
  598. <div class="col-lg-6">
  599. <div class="contact-image wow fadeInUp" data-wow-delay=".4s"><img
  600. src="/picture/contact.png" alt="contact-img">
  601. <div class="cricle-shape"><img src="/picture/circle-2.png" alt="shape-img"></div>
  602. </div>
  603. </div>
  604. </div>
  605. </div>
  606. </div>
  607. </section>
  608. <section class="pricing-section section-bg section-padding">
  609. <div class="tree-shape float-bob-x"><img src="/picture/tree-shape.png" alt="shape-img"></div>
  610. <div class="pencil-shape"><img src="/picture/pencil4.png" alt="shape-img"></div>
  611. <div class="top-shape"><img src="/picture/top-shape.png" alt="shape-img"></div>
  612. <div class="container">
  613. <div class="pricing-wrapper">
  614. <div class="section-title text-center mb-0"><span class="wow fadeInUp">Our pricing</span>
  615. <h2 class="wow fadeInUp" data-wow-delay=".3s">Select a plan according to <br>your requirements</h2>
  616. </div>
  617. <ul class="nav" role="tablist">
  618. <li class="nav-item wow fadeInUp" data-wow-delay=".3s" role="presentation"><a href="#monthly"
  619. data-bs-toggle="tab" class="nav-link active" aria-selected="true" role="tab">Monthly </a>
  620. </li>
  621. <li class="nav-item wow fadeInUp" data-wow-delay=".5s" role="presentation"><a href="#yearly"
  622. data-bs-toggle="tab" class="nav-link" aria-selected="false" role="tab" tabindex="-1">Yearly
  623. </a></li>
  624. </ul>
  625. </div>
  626. <div class="tab-content">
  627. <div id="monthly" class="tab-pane fade show active" role="tabpanel">
  628. <div class="row">
  629. <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
  630. <div class="pricing-items">
  631. <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
  632. <div class="element-shape"><img src="/picture/element.png" alt="shape-img"></div>
  633. <div class="pricing-header">
  634. <h4>Basic Plan</h4>
  635. <h2>$39 <span>/monthly</span></h2>
  636. </div>
  637. <ul class="pricing-list">
  638. <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
  639. <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
  640. <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
  641. <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
  642. <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
  643. </ul><a href="contact.html" class="theme-btn">Choose Plan <i
  644. class="fa-solid fa-arrow-right-long"></i></a>
  645. </div>
  646. </div>
  647. <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
  648. <div class="pricing-items active">
  649. <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
  650. <div class="element-shape"><img src="/picture/element-2.png" alt="shape-img">
  651. </div>
  652. <div class="pricing-header">
  653. <h4>Premium Plan</h4>
  654. <h2>$49 <span>/monthly</span></h2>
  655. </div>
  656. <ul class="pricing-list">
  657. <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
  658. <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
  659. <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
  660. <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
  661. <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
  662. </ul><a href="contact.html" class="theme-btn">Choose Plan <i
  663. class="fa-solid fa-arrow-right-long"></i></a>
  664. </div>
  665. </div>
  666. <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
  667. <div class="pricing-items">
  668. <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
  669. <div class="element-shape"><img src="/picture/element.png" alt="shape-img"></div>
  670. <div class="pricing-header">
  671. <h4>Advanced</h4>
  672. <h2>$99 <span>/monthly</span></h2>
  673. </div>
  674. <ul class="pricing-list">
  675. <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
  676. <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
  677. <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
  678. <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
  679. <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
  680. </ul><a href="contact.html" class="theme-btn">Choose Plan <i
  681. class="fa-solid fa-arrow-right-long"></i></a>
  682. </div>
  683. </div>
  684. </div>
  685. </div>
  686. <div id="yearly" class="tab-pane fade" role="tabpanel">
  687. <div class="row">
  688. <div class="col-xl-4 col-lg-6 col-md-6">
  689. <div class="pricing-items">
  690. <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
  691. <div class="element-shape"><img src="/picture/element.png" alt="shape-img"></div>
  692. <div class="pricing-header">
  693. <h4>Basic Plan</h4>
  694. <h2>$39 <span>/monthly</span></h2>
  695. </div>
  696. <ul class="pricing-list">
  697. <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
  698. <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
  699. <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
  700. <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
  701. <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
  702. </ul><a href="contact.html" class="theme-btn">Choose Plan <i
  703. class="fa-solid fa-arrow-right-long"></i></a>
  704. </div>
  705. </div>
  706. <div class="col-xl-4 col-lg-6 col-md-6">
  707. <div class="pricing-items active">
  708. <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
  709. <div class="element-shape"><img src="/picture/element-2.png" alt="shape-img">
  710. </div>
  711. <div class="pricing-header">
  712. <h4>Premium Plan</h4>
  713. <h2>$49 <span>/monthly</span></h2>
  714. </div>
  715. <ul class="pricing-list">
  716. <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
  717. <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
  718. <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
  719. <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
  720. <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
  721. </ul><a href="contact.html" class="theme-btn">Choose Plan <i
  722. class="fa-solid fa-arrow-right-long"></i></a>
  723. </div>
  724. </div>
  725. <div class="col-xl-4 col-lg-6 col-md-6">
  726. <div class="pricing-items">
  727. <div class="icon"><img src="/picture/icon.svg" alt="icon-img"></div>
  728. <div class="element-shape"><img src="/picture/element.png" alt="shape-img"></div>
  729. <div class="pricing-header">
  730. <h4>Advanced</h4>
  731. <h2>$99 <span>/monthly</span></h2>
  732. </div>
  733. <ul class="pricing-list">
  734. <li><i class="fa-solid fa-check"></i>Condimentum porttitor sem </li>
  735. <li><i class="fa-solid fa-check"></i>Condimentum lacinia quisque </li>
  736. <li><i class="fa-solid fa-check"></i>Fusce sagittis est fringilla auctor </li>
  737. <li><i class="fa-solid fa-check"></i>Ligula enim varius lacus et luctus </li>
  738. <li><i class="fa-solid fa-check"></i>Pellentesque non massa sed elit </li>
  739. </ul><a href="contact.html" class="theme-btn">Choose Plan <i
  740. class="fa-solid fa-arrow-right-long"></i></a>
  741. </div>
  742. </div>
  743. </div>
  744. </div>
  745. </div>
  746. </div>
  747. </section>
  748. <section class="testimonial-section-2 fix section-padding">
  749. <div class="zebra-shape float-bob-y"><img src="/picture/zebra.png" alt="shape-img"></div>
  750. <div class="left-shape"><img src="/picture/testi-l-shape.png" alt="shape-img"></div>
  751. <div class="container">
  752. <div class="testimonial-wrapper section-padding">
  753. <div class="shape-1"><img src="/picture/shape-11.png" alt="shape-img"></div>
  754. <div class="shape-2"><img src="/picture/shape-2.png" alt="shape-img"></div>
  755. <div class="testimonial-bg"></div>
  756. <div class="section-title text-center"><span class="wow fadeInUp">Testimonials</span>
  757. <h2 class="wow fadeInUp" data-wow-delay=".3s">What clients say</h2>
  758. </div>
  759. <div class="swiper testimonial-slider-2">
  760. <div class="swiper-wrapper">
  761. <div class="swiper-slide">
  762. <div class="testimonial-box-items">
  763. <p>Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
  764. dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
  765. elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
  766. sapien ac elementum </p>
  767. <div class="client-info"><img src="/picture/author1.png" alt="img">
  768. <div class="content">
  769. <h5>Ronald Richards</h5>
  770. <p>Co,Founder</p>
  771. </div>
  772. </div>
  773. </div>
  774. </div>
  775. <div class="swiper-slide">
  776. <div class="testimonial-box-items">
  777. <p>Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
  778. dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
  779. elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
  780. sapien ac elementum </p>
  781. <div class="client-info"><img src="/picture/author1.png" alt="img">
  782. <div class="content">
  783. <h5>Ronald Richards</h5>
  784. <p>Co,Founder</p>
  785. </div>
  786. </div>
  787. </div>
  788. </div>
  789. <div class="swiper-slide">
  790. <div class="testimonial-box-items">
  791. <p>Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
  792. dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
  793. elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
  794. sapien ac elementum </p>
  795. <div class="client-info"><img src="/picture/author1.png" alt="img">
  796. <div class="content">
  797. <h5>Ronald Richards</h5>
  798. <p>Co,Founder</p>
  799. </div>
  800. </div>
  801. </div>
  802. </div>
  803. </div>
  804. </div>
  805. <div class="array-button"><button class="array-prev"><i class="fal fa-arrow-left"></i></button><button
  806. class="array-next"><i class="fal fa-arrow-right"></i></button></div>
  807. </div>
  808. </div>
  809. </section>
  810. <section class="news-section-2 fix section-padding" id="blog">
  811. <div class="shape-1 float-bob-y"><img src="/picture/shape-12.png" alt="shape-img"></div>
  812. <div class="container">
  813. <div class="section-title text-center pt-40"><span class="text-white wow fadeInUp">Blog And News</span>
  814. <h2 class="text-white wow fadeInUp" data-wow-delay=".3s">Education foundation <br>for a better </h2>
  815. </div>
  816. <div class="row">
  817. <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".3s">
  818. <div class="news-card-items">
  819. <div class="news-image"><img src="/picture/042.jpg" alt="img">
  820. <div class="news-layer-wrapper">
  821. <div class="news-layer-image" style="background-image: url('/image/04.jpg');">
  822. </div>
  823. <div class="news-layer-image" style="background-image: url('/image/04.jpg');">
  824. </div>
  825. <div class="news-layer-image" style="background-image: url('/image/04.jpg');">
  826. </div>
  827. <div class="news-layer-image" style="background-image: url('/image/04.jpg');">
  828. </div>
  829. </div>
  830. <div class="post"><span>Activities</span></div>
  831. </div>
  832. <div class="news-content">
  833. <ul>
  834. <li><i class="fas fa-calendar-alt"></i>Feb 10,2024 </li>
  835. <li><i class="far fa-user"></i>By admin </li>
  836. </ul>
  837. <h3><a href="news-details.html">From without content <br>style without </a></h3><a
  838. href="news-details.html" class="theme-btn-2 mt-3">Read More <i
  839. class="fas fa-long-arrow-right"></i></a>
  840. </div>
  841. </div>
  842. </div>
  843. <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".5s">
  844. <div class="news-card-items">
  845. <div class="news-image"><img src="/picture/051.jpg" alt="img">
  846. <div class="news-layer-wrapper">
  847. <div class="news-layer-image" style="background-image: url('/image/05.jpg');">
  848. </div>
  849. <div class="news-layer-image" style="background-image: url('/image/05.jpg');">
  850. </div>
  851. <div class="news-layer-image" style="background-image: url('/image/05.jpg');">
  852. </div>
  853. <div class="news-layer-image" style="background-image: url('/image/05.jpg');">
  854. </div>
  855. </div>
  856. <div class="post"><span>Activities</span></div>
  857. </div>
  858. <div class="news-content">
  859. <ul>
  860. <li><i class="fas fa-calendar-alt"></i>Feb 10,2024 </li>
  861. <li><i class="far fa-user"></i>By admin </li>
  862. </ul>
  863. <h3><a href="news-details.html">That jerk Form Finance <br>really threw me </a></h3><a
  864. href="news-details.html" class="theme-btn-2 mt-3">Read More <i
  865. class="fas fa-long-arrow-right"></i></a>
  866. </div>
  867. </div>
  868. </div>
  869. <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".7s">
  870. <div class="news-card-items">
  871. <div class="news-image"><img src="/picture/061.jpg" alt="img">
  872. <div class="news-layer-wrapper">
  873. <div class="news-layer-image" style="background-image: url('/image/06.jpg');">
  874. </div>
  875. <div class="news-layer-image" style="background-image: url('/image/06.jpg');">
  876. </div>
  877. <div class="news-layer-image" style="background-image: url('/image/06.jpg');">
  878. </div>
  879. <div class="news-layer-image" style="background-image: url('/image/06.jpg');">
  880. </div>
  881. </div>
  882. <div class="post"><span>Activities</span></div>
  883. </div>
  884. <div class="news-content">
  885. <ul>
  886. <li><i class="fas fa-calendar-alt"></i>Feb 10,2024 </li>
  887. <li><i class="far fa-user"></i>By admin </li>
  888. </ul>
  889. <h3><a href="news-details.html">All Inclusive Ultimate Circle <br>Island Day with Lunch </a>
  890. </h3><a href="news-details.html" class="theme-btn-2 mt-3">Read More <i
  891. class="fas fa-long-arrow-right"></i></a>
  892. </div>
  893. </div>
  894. </div>
  895. </div>
  896. </div>
  897. </section>
  898. <div class="brand-section fix section-padding pt-0">
  899. <div class="container">
  900. <div class="brand-wrapper">
  901. <h6 class="text-center wow fadeInUp" data-wow-delay=".3s">1k+Brands Trust Us</h6>
  902. <div class="swiper brand-slider">
  903. <div class="swiper-wrapper">
  904. <div class="swiper-slide">
  905. <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
  906. </div>
  907. <div class="swiper-slide">
  908. <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
  909. </div>
  910. <div class="swiper-slide">
  911. <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
  912. </div>
  913. <div class="swiper-slide">
  914. <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
  915. </div>
  916. <div class="swiper-slide">
  917. <div class="brand-image"><img src="/picture/brand.png" alt="brand-img"></div>
  918. </div>
  919. </div>
  920. </div>
  921. </div>
  922. </div>
  923. </div>
  924. <FooterSection></FooterSection>
  925. <!-- <footer class="footer-section section-bg">
  926. <div class="frame-shape style-2"><img src="/picture/frame-2.png" alt="shape-img"></div>
  927. <div class="frame-shape-3 float-bob-y"><img src="/picture/frame-3.png" alt="shape-img"></div>
  928. <div class="footer-widgets-wrapper">
  929. <div class="container">
  930. <div class="row">
  931. <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".3s">
  932. <div class="single-footer-widget">
  933. <div class="widget-head"><a href="p9wfc14694.html"><img src="/picture/logo.svg"
  934. alt="logo-img"></a></div>
  935. <div class="footer-content">
  936. <p>Phasellus ultricies aliquam volutpat ullamcorper laoreet neque,a lacinia curabitur
  937. lacinia mollis </p>
  938. <div class="social-icon d-flex align-items-center"><a href="#"><i
  939. class="fab fa-facebook-f"></i></a><a href="#"><i
  940. class="fab fa-twitter"></i></a><a href="#"><i
  941. class="fa-brands fa-linkedin-in"></i></a><a href="#"><i
  942. class="fa-brands fa-youtube"></i></a></div>
  943. </div>
  944. </div>
  945. </div>
  946. <div class="col-xl-2 col-lg-4 col-md-6 ps-lg-5 wow fadeInUp" data-wow-delay=".5s">
  947. <div class="single-footer-widget">
  948. <div class="widget-head">
  949. <h3>Quick Links</h3>
  950. </div>
  951. <ul class="list-area">
  952. <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Our Services
  953. </a></li>
  954. <li><a href="news-details.html"><i class="fa-solid fa-chevron-right"></i>Our Blogs </a>
  955. </li>
  956. <li><a href="faq.html"><i class="fa-solid fa-chevron-right"></i>FAQ’S </a></li>
  957. <li><a href="contact.html"><i class="fa-solid fa-chevron-right"></i>Contact Us </a></li>
  958. </ul>
  959. </div>
  960. </div>
  961. <div class="col-xl-3 col-lg-4 col-md-6 ps-lg-5 wow fadeInUp" data-wow-delay=".5s">
  962. <div class="single-footer-widget style-margin">
  963. <div class="widget-head">
  964. <h3>Categories</h3>
  965. </div>
  966. <ul class="list-area">
  967. <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Music
  968. Learning </a></li>
  969. <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Sports,Games
  970. </a></li>
  971. <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Science
  972. Class </a></li>
  973. <li><a href="program-details.html"><i class="fa-solid fa-chevron-right"></i>Drawing </a>
  974. </li>
  975. </ul>
  976. </div>
  977. </div>
  978. <div class="col-xl-4 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".7s">
  979. <div class="single-footer-widget style-margin">
  980. <div class="widget-head">
  981. <h3>Our Galleries</h3>
  982. </div>
  983. <div class="footer-gallery">
  984. <div class="gallery-wrap">
  985. <div class="gallery-item">
  986. <div class="thumb"><a href="/picture/gallery-1.jpg" class="img-popup"><img
  987. src="/picture/gallery-1.jpg" alt="gallery-img">
  988. <div class="icon"><i class="far fa-plus"></i></div>
  989. </a></div>
  990. <div class="thumb"><a href="/picture/gallery-2.jpg" class="img-popup"><img
  991. src="/picture/gallery-2.jpg" alt="gallery-img">
  992. <div class="icon"><i class="far fa-plus"></i></div>
  993. </a></div>
  994. <div class="thumb"><a href="/picture/gallery-3.jpg" class="img-popup"><img
  995. src="/picture/gallery-3.jpg" alt="gallery-img">
  996. <div class="icon"><i class="far fa-plus"></i></div>
  997. </a></div>
  998. </div>
  999. <div class="gallery-item">
  1000. <div class="thumb"><a href="/picture/gallery-4.jpg" class="img-popup"><img
  1001. src="/picture/gallery-4.jpg" alt="gallery-img">
  1002. <div class="icon"><i class="far fa-plus"></i></div>
  1003. </a></div>
  1004. <div class="thumb"><a href="/picture/gallery-5.jpg" class="img-popup"><img
  1005. src="/picture/gallery-5.jpg" alt="gallery-img">
  1006. <div class="icon"><i class="far fa-plus"></i></div>
  1007. </a></div>
  1008. <div class="thumb"><a href="/picture/gallery-6.jpg" class="img-popup"><img
  1009. src="/picture/gallery-6.jpg" alt="gallery-img">
  1010. <div class="icon"><i class="far fa-plus"></i></div>
  1011. </a></div>
  1012. </div>
  1013. </div>
  1014. </div>
  1015. </div>
  1016. </div>
  1017. </div>
  1018. </div>
  1019. </div>
  1020. <div class="footer-bottom">
  1021. <div class="f-bottom-shape"></div>
  1022. <div class="container">
  1023. <div class="footer-wrapper d-flex align-items-center justify-content-between">
  1024. <p class="wow fadeInLeft color-2" data-wow-delay=".3s">© All Copyright 2024 by <a
  1025. href="https://www.99ziyuan.net">99ziyuan</a></p>
  1026. <ul class="footer-menu wow fadeInRight" data-wow-delay=".5s">
  1027. <li><a href="contact.html">Terms & Condition </a></li>
  1028. <li><a href="contact.html">Privacy Policy </a></li>
  1029. </ul>
  1030. </div>
  1031. </div><a href="#" id="scrollUp" class="scroll-icon"><i class="far fa-arrow-up"></i></a>
  1032. </div>
  1033. </footer> -->
  1034. </template>