service page added

This commit is contained in:
sujan
2024-09-10 17:26:50 +05:45
parent 8525fb7d12
commit 04f9093a57
7 changed files with 236 additions and 124 deletions

157
uk.php
View File

@ -24,7 +24,6 @@
</div>
</div>
</section>
<!--Intro Section End-->
<!--Country Image Section-->
@ -39,8 +38,160 @@
</div>
</div>
</div>
</section>
<!--Country Image Section End-->
<!--Country Image Section End-->
<!--Blog Details-->
<section class="background-repeat overflow-hidden" style="background-image:url('images/demo-spa-salon-home-bg-01.jpg');">
<div class="container">
<div class="row justify-content-center mb-1">
<div class="col-lg-7 text-center"> <span class="fs-15 alt-font fw-600 text-tussock-yellow text-uppercase ls-2px">Popular classes</span>
<h3 class="fw-600 text-dark-gray ls-minus-1px">Find what you love</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 position-relative">
<div class="outside-box-right-20 sm-outside-box-left-0 sm-outside-box-right-0 appear anime-complete" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }" style="">
<div class="swiper magic-cursor swiper-initialized swiper-horizontal swiper-backface-hidden" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 30, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1400&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper pt-20px pb-20px" id="swiper-wrapper-557aed274bd9f568" aria-live="off" style="transition-duration: 0ms; transform: translate3d(-1604px, 0px, 0px); transition-delay: 0ms;">
<!-- start slider item -->
<!-- end slider item -->
<!-- start slider item -->
<!-- end slider item -->
<!-- start slider item -->
<!-- end slider item -->
<!-- start slider item -->
<!-- end slider item -->
<!-- start slider item -->
<!-- end slider item -->
<!-- start slider item -->
<!-- end slider item -->
<!-- start slider item -->
<!-- end slider item -->
<!-- start slider item -->
<!-- end slider item -->
<div class="swiper-slide" role="group" aria-label="4 / 8" style="width: 371px; margin-right: 30px;" data-swiper-slide-index="3">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image"> <img src="images/demo-yoga-and-meditation-home-05.jpg" alt="" data-no-retina=""> </div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0"> <a href="#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Sound therapy</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$270</span>Per month</div>
<a href="#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a> </div>
</div>
</div>
</div>
<div class="swiper-slide" role="group" aria-label="5 / 8" style="width: 371px; margin-right: 30px;" data-swiper-slide-index="4">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image"> <img src="images/demo-yoga-and-meditation-home-06.jpg" alt="" data-no-retina=""> </div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0"> <a href="#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Nadabrahma yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$310</span>Per month</div>
<a href="#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a> </div>
</div>
</div>
</div>
<div class="swiper-slide" role="group" aria-label="6 / 8" style="width: 371px; margin-right: 30px;" data-swiper-slide-index="5">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image"> <img src="images/demo-yoga-and-meditation-home-02.jpg" alt="" data-no-retina=""> </div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0"> <a href="#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Kundalini yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$220</span>Per month</div>
<a href="#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a> </div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-prev" role="group" aria-label="7 / 8" style="width: 371px; margin-right: 30px;" data-swiper-slide-index="6">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image"> <img src="images/demo-yoga-and-meditation-home-03.jpg" alt="" data-no-retina=""> </div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0"> <a href="#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Aerial yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$240</span>Per month</div>
<a href="#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a> </div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-active" role="group" aria-label="8 / 8" style="width: 371px; margin-right: 30px;" data-swiper-slide-index="7">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image"> <img src="images/demo-yoga-and-meditation-home-04.jpg" alt="" data-no-retina=""> </div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0"> <a href="#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Meditation classes</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$100</span>Per month</div>
<a href="#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a> </div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-next" role="group" aria-label="1 / 8" style="width: 371px; margin-right: 30px;" data-swiper-slide-index="0">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image"> <img src="images/demo-yoga-and-meditation-home-02.jpg" alt="" data-no-retina=""> </div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0"> <a href="#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Kundalini yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$220</span>Per month</div>
<a href="#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a> </div>
</div>
</div>
</div>
<div class="swiper-slide" role="group" aria-label="2 / 8" style="width: 371px; margin-right: 30px;" data-swiper-slide-index="1">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image"> <img src="images/demo-yoga-and-meditation-home-03.jpg" alt="" data-no-retina=""> </div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0"> <a href="#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Aerial yoga</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$240</span>Per month</div>
<a href="#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a> </div>
</div>
</div>
</div>
<div class="swiper-slide" role="group" aria-label="3 / 8" style="width: 371px; margin-right: 30px;" data-swiper-slide-index="2">
<div class="box-shadow-extra-large services-box-style-01 hover-box last-paragraph-no-margin border-radius-4px overflow-hidden">
<div class="position-relative box-image"> <img src="images/demo-yoga-and-meditation-home-04.jpg" alt="" data-no-retina=""> </div>
<div class="bg-white">
<div class="ps-50px pe-50px pt-35px sm-p-35px sm-pb-0"> <a href="#" class="d-inline-block fs-19 primary-font fw-600 text-dark-gray mb-5px">Meditation classes</a>
<p>Lorem ipsum dolor eiusmod adipiscing lit tempor.</p>
</div>
<div class="border-top border-color-extra-medium-gray pt-20px pb-20px ps-50px pe-50px mt-30px sm-ps-35px sm-pe-35px position-relative">
<div class="fs-17"><span class="text-dark-gray alt-font fs-26 fw-600 me-5px">$100</span>Per month</div>
<a href="#" class="d-flex justify-content-center align-items-center w-55px h-55px lh-55 rounded-circle bg-dark-gray position-absolute right-40px top-minus-30px"><i class="bi bi-arrow-right-short text-white icon-very-medium"></i></a> </div>
</div>
</div>
</div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</div>
<!-- start slider pagination -->
<!--<div class="swiper-pagination slider-four-slide-pagination swiper-pagination-style-2 swiper-pagination-clickable swiper-pagination-bullets"></div>-->
<!-- end slider pagination -->
</div>
</div>
</div>
</section>
<!--Blog Details End-->
<?php include('footer.php')?>