440 lines
28 KiB
HTML
440 lines
28 KiB
HTML
<div>
|
|
<div class="relative overflow-hidden bg-black pt-[106px]">
|
|
<div class="absolute bottom-0 z-[1] h-4 w-[calc(100%_+_100px)] bg-secondary xl:-bottom-44 xl:h-80 ltr:xl:-rotate-6 rtl:xl:rotate-6"></div>
|
|
<img src="/assets/images/gym/fitness-text.svg" alt="" class="absolute top-32 hidden h-4/5 ltr:left-0 rtl:right-0 xl:block" />
|
|
<div class="container">
|
|
<div class="relative pb-14 pt-10 md:pt-16 xl:pb-52">
|
|
<img src="/assets/images/gym/banner-gradiant.svg" alt="" class="absolute top-0 ltr:-left-80 rtl:-right-80" />
|
|
<div class="relative z-[1] text-center xl:w-3/5 xl:ltr:text-left xl:rtl:text-right">
|
|
<h2 class="text-border-white pr-3 text-3xl font-black uppercase italic tracking-[0.06em] sm:text-5xl sm:leading-normal lg:text-[80px]">
|
|
<span>Nothing but </span>
|
|
<span class="bg-gradient-to-r from-secondary to-primary bg-clip-text text-transparent">gains here.</span>
|
|
</h2>
|
|
<p class="text-lg leading-8">
|
|
Accumsan vulputate sed id blandit duis pellentesque nullam diam purus. Quisque diam pharetra, tristique non arcu eu. Integer.
|
|
</p>
|
|
<div class="mt-10 flex items-center justify-center gap-8 xl:justify-start">
|
|
<a
|
|
href="javascript:"
|
|
class="rounded-full border-2 border-white py-4 px-6 text-sm font-extrabold uppercase tracking-[4px] text-white transition hover:bg-white hover:text-black"
|
|
>start now</a
|
|
>
|
|
<a href="javascript:" class="group flex items-center gap-2.5 text-sm font-extrabold text-white">
|
|
<span>LEARN MORE</span>
|
|
<span class="relative transition-all ltr:left-0 ltr:group-hover:left-2 rtl:right-0 rtl:group-hover:right-2">
|
|
<svg width="13" height="13" viewBox="0 0 13 13" fill="none">
|
|
<path d="M2 11.0001L11.0909 1.90918" stroke="white" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="round" />
|
|
<path d="M4.61365 1H12V8.38636" stroke="white" stroke-width="1.8" stroke-linecap="square" />
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="mt-12 uppercase text-white xl:mt-20">
|
|
<h4 class="text-xl font-extrabold tracking-[1px]">what you get</h4>
|
|
<div class="mt-7 grid gap-4 text-xs leading-5 tracking-[1px] sm:grid-cols-2 md:grid-cols-3">
|
|
<div class="flex items-center gap-4 rounded-full bg-gray-dark py-4 px-6">
|
|
<img src="/assets/images/gym/customized-icon.svg" alt="" />
|
|
<p>Customised fitness plan</p>
|
|
</div>
|
|
<div class="flex items-center gap-4 rounded-full bg-gray-dark py-4 px-6">
|
|
<img src="/assets/images/gym/bettery-icon.svg" alt="" />
|
|
<p>keep you feet and strong</p>
|
|
</div>
|
|
<div class="flex items-center gap-4 rounded-full bg-gray-dark py-4 px-6">
|
|
<img src="/assets/images/gym/training-icon.svg" alt="" />
|
|
<p>High Intensity Training</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-0 z-[1] mx-auto mt-10 h-[93%] ltr:-right-56 rtl:-left-56 rtl:rotate-y-180 sm:w-1/2 xl:absolute xl:mx-0 xl:mt-0 xl:w-auto">
|
|
<img src="/assets/images/gym/runner-girl.png" alt="" class="h-full" data-aos="fade-left" data-aos-duration="1000" />
|
|
</div>
|
|
<div class="absolute top-0 hidden h-full w-[690px] ltr:-right-52 rtl:-left-52 rtl:rotate-y-180 xl:block">
|
|
<img src="/assets/images/gym/banner-line.png" alt="" class="h-full w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="bg-white py-14 dark:bg-gray-dark md:py-24">
|
|
<div class="container">
|
|
<div class="flex flex-col justify-between gap-x-4 lg:flex-row">
|
|
<div class="font-semibold uppercase italic lg:w-1/2">
|
|
<img src="/assets/images/gym/01.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
|
|
<h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
|
|
<span class="text-black dark:text-white">our </span>
|
|
<span class="text-border-gray tracking-wider">popular </span>
|
|
<span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">classes</span>
|
|
</h2>
|
|
<p class="leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
|
|
</div>
|
|
<div class="mt-10 text-center lg:mt-20 lg:ltr:text-left lg:rtl:text-right">
|
|
<a
|
|
href="javascript:"
|
|
class="rounded-full border-2 border-black py-4 px-6 text-sm font-extrabold uppercase tracking-[4px] text-black transition hover:bg-black hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-black"
|
|
>more services</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div class="group">
|
|
<div class="overflow-hidden rounded-t-full bg-gradient-to-b from-gray/20 to-transparent p-1 pb-0 sm:h-96">
|
|
<img
|
|
src="/assets/images/gym/service1.jpg"
|
|
alt=""
|
|
class="h-full w-full rounded-t-full object-cover transition duration-500 group-hover:scale-110"
|
|
/>
|
|
</div>
|
|
<div class="mt-5 italic">
|
|
<h5 class="text-lg font-black text-black dark:text-white">Pilates Training</h5>
|
|
<p class="mb-4 mt-2 font-semibold line-clamp-2">Controlled movements that enhance your balance, core strength, flexibility.</p>
|
|
<a href="javascript:" class="text-sm font-extrabold uppercase text-secondary transition hover:text-primary">read more</a>
|
|
</div>
|
|
</div>
|
|
<div class="group">
|
|
<div class="overflow-hidden rounded-t-full bg-gradient-to-b from-gray/20 to-transparent p-1 pb-0 sm:h-96">
|
|
<img
|
|
src="/assets/images/gym/service2.jpg"
|
|
alt=""
|
|
class="h-full w-full rounded-t-full object-cover transition duration-500 group-hover:scale-110"
|
|
/>
|
|
</div>
|
|
<div class="mt-5 italic">
|
|
<h5 class="text-lg font-black text-black dark:text-white">Aerobic Training</h5>
|
|
<p class="mb-4 mt-2 font-semibold line-clamp-2">Physical activity that increases the heart rate and the body's use of oxygen.</p>
|
|
<a href="javascript:" class="text-sm font-extrabold uppercase text-secondary transition hover:text-primary">read more</a>
|
|
</div>
|
|
</div>
|
|
<div class="group">
|
|
<div class="overflow-hidden rounded-t-full bg-gradient-to-b from-gray/20 to-transparent p-1 pb-0 sm:h-96">
|
|
<img
|
|
src="/assets/images/gym/service3.jpg"
|
|
alt=""
|
|
class="h-full w-full rounded-t-full object-cover transition duration-500 group-hover:scale-110"
|
|
/>
|
|
</div>
|
|
<div class="mt-5 italic">
|
|
<h5 class="text-lg font-black text-black dark:text-white">CrossFit Workout</h5>
|
|
<p class="mb-4 mt-2 font-semibold line-clamp-2">Strength and conditioning workout that is made up of functional movement.</p>
|
|
<a href="javascript:" class="text-sm font-extrabold uppercase text-secondary transition hover:text-primary">read more</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-14 dark:bg-black md:py-20">
|
|
<div class="container">
|
|
<div class="grid items-center gap-5 lg:grid-cols-2">
|
|
<div class="group overflow-hidden lg:order-2 lg:h-[500px]" data-aos="fade-left" data-aos-duration="1000">
|
|
<img
|
|
src="/assets/images/gym/02-image.jpg"
|
|
alt=""
|
|
class="h-full w-full object-cover transition duration-500 group-hover:rotate-6 group-hover:scale-125"
|
|
/>
|
|
</div>
|
|
<div class="mt-8 lg:mt-0">
|
|
<div class="font-semibold uppercase italic">
|
|
<img src="/assets/images/gym/02.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
|
|
<h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
|
|
<span class="text-black dark:text-white">why </span>
|
|
<span class="text-border-gray tracking-wider">choose </span>
|
|
<span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">plurk</span>
|
|
</h2>
|
|
<p class="leading-loose">
|
|
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
|
|
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
</p>
|
|
</div>
|
|
<div class="mt-10">
|
|
<a
|
|
href="javascript:"
|
|
class="rounded-full border-2 border-black py-4 px-6 text-sm font-extrabold uppercase tracking-[4px] text-black transition hover:bg-black hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-black"
|
|
>learn more</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-[url(/assets/images/gym/features-bg.png)] bg-cover bg-center bg-no-repeat py-14 md:py-20">
|
|
<div class="container">
|
|
<div class="grid lg:grid-cols-2">
|
|
<div class="relative h-[350px]" data-aos="fade-up" data-aos-duration="1000">
|
|
<span class="absolute inset-0 bg-gradient-to-t from-primary to-transparent"></span>
|
|
<img src="/assets/images/gym/coaches.jpg" alt="" class="h-full w-full object-cover" />
|
|
<h5 class="absolute bottom-5 text-2xl font-black uppercase italic text-white ltr:left-7 rtl:right-7">best coaches</h5>
|
|
</div>
|
|
<div class="relative h-[350px]" data-aos="fade-up" data-aos-duration="1000">
|
|
<span class="absolute inset-0 bg-gradient-to-t from-secondary to-transparent"></span>
|
|
<img src="/assets/images/gym/prices.jpg" alt="" class="h-full w-full object-cover" />
|
|
<h5 class="absolute bottom-5 text-2xl font-black uppercase italic text-white ltr:left-7 rtl:right-7">nice prices</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="overflow-x-hidden bg-white dark:bg-black">
|
|
<div class="grid items-center lg:grid-cols-2">
|
|
<div class="h-full lg:order-2 xl:h-[640px]" data-aos="fade-left" data-aos-duration="1500">
|
|
<img src="/assets/images/gym/journey.jpg" alt="" class="h-full w-full object-cover" />
|
|
</div>
|
|
<div class="px-4 py-10 ltr:xl:mr-24 rtl:xl:ml-24">
|
|
<div class="font-semibold uppercase italic lg:max-w-[610px] ltr:lg:ml-auto rtl:lg:mr-auto">
|
|
<img src="/assets/images/gym/03.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
|
|
<h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
|
|
<span class="text-black dark:text-white">JUMPSTART </span>
|
|
<span class="text-border-gray tracking-wider">YOUR </span>
|
|
<span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">JOURNEY</span>
|
|
</h2>
|
|
<p class="leading-loose line-clamp-5">
|
|
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
|
|
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid items-center lg:grid-cols-2">
|
|
<div class="order-2 px-4 py-10 ltr:xl:ml-24 rtl:xl:mr-24">
|
|
<div class="font-semibold uppercase italic lg:max-w-[610px]">
|
|
<img src="/assets/images/gym/04.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
|
|
<h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
|
|
<span class="text-black dark:text-white">TRANSFORM </span>
|
|
<span class="text-border-gray tracking-wider">YOUR </span>
|
|
<span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">FITNESS</span>
|
|
</h2>
|
|
<p class="leading-loose line-clamp-5">
|
|
4 rooms, 5 unique workouts, 1 location. plurk offers unrivaled fitness programming. Personal workout stations allow for a safe and
|
|
comfortable experience. Small class sizes offer a greater level of instructor and group engagement.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="h-full xl:h-[640px]" data-aos="fade-right" data-aos-duration="1500">
|
|
<img src="/assets/images/gym/fitness.jpg" alt="" class="h-full w-full object-cover" />
|
|
</div>
|
|
</div>
|
|
<div class="grid items-center lg:grid-cols-2">
|
|
<div class="h-full lg:order-2 xl:h-[640px]" data-aos="fade-left" data-aos-duration="1500">
|
|
<img src="/assets/images/gym/evolve-togather.jpg" alt="" class="h-full w-full object-cover" />
|
|
</div>
|
|
<div class="px-4 py-10 ltr:xl:mr-24 rtl:xl:ml-24">
|
|
<div class="font-semibold uppercase italic lg:max-w-[610px] ltr:lg:ml-auto rtl:lg:mr-auto">
|
|
<img src="/assets/images/gym/05.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
|
|
<h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
|
|
<span class="text-black dark:text-white">EVOLVE </span>
|
|
<span class="text-border-gray tracking-wider">TO</span
|
|
><span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">GETHER</span>
|
|
</h2>
|
|
<p class="leading-loose line-clamp-5">
|
|
You can push yourself further with plurk. Our coaches are passionate and supportive, and our studio is outfitted with innovative
|
|
lighting and sound systems to fuel your workout.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-14 uppercase italic dark:bg-gray-dark md:py-20">
|
|
<div class="container">
|
|
<div class="font-semibold">
|
|
<img src="/assets/images/gym/06.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
|
|
<h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
|
|
<span class="text-black dark:text-white">OUR </span>
|
|
<span class="text-border-gray tracking-wider">FITNESS </span>
|
|
<span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">COACHES</span>
|
|
</h2>
|
|
<p class="leading-loose xl:w-1/2">plurk is more than another workout, it's a comprehensive approach to fitness.</p>
|
|
</div>
|
|
<div class="mt-12 grid gap-7 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div
|
|
class="group relative flex h-[300px] items-end justify-center overflow-hidden bg-[rgba(119,128,161,0.1)] px-4 pt-6"
|
|
data-aos="fade-up"
|
|
data-aos-duration="1000"
|
|
>
|
|
<img src="/assets/images/gym/coach-1.png" alt="" class="h-full object-cover object-top transition group-hover:scale-105" />
|
|
<div class="absolute bottom-0 w-4/5 bg-black py-2.5 px-5 ltr:left-0 rtl:right-0">
|
|
<h3 class="font-black text-white">harlan hagen</h3>
|
|
<span class="text-sm font-bold">Gym Fitness</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="group relative flex h-[300px] items-end justify-center overflow-hidden bg-[rgba(119,128,161,0.1)] px-4 pt-6"
|
|
data-aos="fade-up"
|
|
data-aos-duration="1000"
|
|
>
|
|
<img src="/assets/images/gym/coach-2.png" alt="" class="h-full object-cover object-top transition group-hover:scale-105" />
|
|
<div class="absolute bottom-0 w-4/5 bg-black py-2.5 px-5 ltr:left-0 rtl:right-0">
|
|
<h3 class="font-black text-white">Susan Bonilla</h3>
|
|
<span class="text-sm font-bold">Aerobics</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="group relative flex h-[300px] items-end justify-center overflow-hidden bg-[rgba(119,128,161,0.1)] px-4 pt-6"
|
|
data-aos="fade-up"
|
|
data-aos-duration="1000"
|
|
>
|
|
<img src="/assets/images/gym/coach-3.png" alt="" class="h-full object-cover object-top transition group-hover:scale-105" />
|
|
<div class="absolute bottom-0 w-4/5 bg-black py-2.5 px-5 ltr:left-0 rtl:right-0">
|
|
<h3 class="font-black text-white">Mike Gipson</h3>
|
|
<span class="text-sm font-bold">Pilates & Stretching</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="group relative flex h-[300px] items-end justify-center overflow-hidden bg-[rgba(119,128,161,0.1)] px-4 pt-6"
|
|
data-aos="fade-up"
|
|
data-aos-duration="1000"
|
|
>
|
|
<img src="/assets/images/gym/coach-4.png" alt="" class="h-full object-cover object-top transition group-hover:scale-105" />
|
|
<div class="absolute bottom-0 w-4/5 bg-black py-2.5 px-5 ltr:left-0 rtl:right-0">
|
|
<h3 class="font-black text-white">Judy Chu</h3>
|
|
<span class="text-sm font-bold">Weight Loss</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-black bg-[url(/assets/images/gym/counter-bg.png)] bg-cover bg-center bg-no-repeat py-14 md:py-20">
|
|
<div class="container">
|
|
<div class="grid gap-y-10 gap-x-4 uppercase italic sm:grid-cols-2 lg:grid-cols-4">
|
|
<div class="space-y-5 text-center">
|
|
<div
|
|
class="text-5xl font-black text-white"
|
|
[countUp]="10"
|
|
[options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
|
|
[reanimateOnClick]="false"
|
|
>
|
|
{{0}}
|
|
</div>
|
|
<p class="text-lg font-semibold">Years of Expertise</p>
|
|
</div>
|
|
<div class="space-y-5 text-center">
|
|
<div
|
|
class="text-5xl font-black text-white"
|
|
[countUp]="15"
|
|
[options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
|
|
[reanimateOnClick]="false"
|
|
>
|
|
{{0}}
|
|
</div>
|
|
<p class="text-lg font-semibold">Professional Coaches</p>
|
|
</div>
|
|
<div class="space-y-5 text-center">
|
|
<div
|
|
class="text-5xl font-black text-white"
|
|
[countUp]="20"
|
|
[options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
|
|
[reanimateOnClick]="false"
|
|
>
|
|
{{0}}
|
|
</div>
|
|
<p class="text-lg font-semibold">Different Classes</p>
|
|
</div>
|
|
<div class="space-y-5 text-center">
|
|
<div
|
|
class="text-5xl font-black text-white"
|
|
[countUp]="535"
|
|
[options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
|
|
[reanimateOnClick]="false"
|
|
>
|
|
{{0}}
|
|
</div>
|
|
<p class="text-lg font-semibold">Club Members</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-gradient-to-t from-white/50 to-transparent py-14 italic dark:bg-gray-dark dark:from-transparent md:py-20">
|
|
<div class="container">
|
|
<div class="font-semibold uppercase">
|
|
<img src="/assets/images/gym/07.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
|
|
<h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
|
|
<span class="text-black dark:text-white">TOGETHER </span>
|
|
<span class="text-border-gray tracking-wider">we </span>
|
|
<span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">SUCCEED</span>
|
|
</h2>
|
|
<p class="leading-loose xl:w-2/3">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
</div>
|
|
|
|
<client-slider [feedbacks]="feedbacks" type="creative-agency"></client-slider>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="overflow-hidden py-14 dark:bg-black md:py-20">
|
|
<div class="container">
|
|
<div class="font-semibold uppercase italic">
|
|
<img src="/assets/images/gym/08.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
|
|
<h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
|
|
<span class="text-black dark:text-white">Articles </span>
|
|
<span class="text-border-gray tracking-wider">& </span>
|
|
<span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">news</span>
|
|
</h2>
|
|
<p class="leading-loose xl:w-1/2">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
|
|
</div>
|
|
<div class="mt-8 grid gap-y-10 gap-x-7 italic sm:grid-cols-2 md:mt-12 lg:grid-cols-3">
|
|
<div class="group" data-aos="fade-up" data-aos-duration="1000">
|
|
<div class="overflow-hidden sm:h-64">
|
|
<img src="/assets/images/gym/news1.jpg" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-110" />
|
|
</div>
|
|
<div class="pt-5 font-extrabold">
|
|
<div class="inline-block bg-gray/10 p-2.5 text-sm font-bold">December 25, 2022</div>
|
|
<a href="javascript:" class="my-3 block text-[22px] leading-9 text-black transition line-clamp-2 hover:text-secondary dark:text-white"
|
|
>How to brace and breathe properly for weightlifting</a
|
|
>
|
|
<p class="mb-5 font-semibold line-clamp-3">
|
|
It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
|
|
</p>
|
|
<a href="javascript:" class="text-secondary transition hover:text-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
<div class="group" data-aos="fade-up" data-aos-duration="1000">
|
|
<div class="overflow-hidden sm:h-64">
|
|
<img src="/assets/images/gym/news2.jpg" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-110" />
|
|
</div>
|
|
<div class="pt-5 font-extrabold">
|
|
<div class="inline-block bg-gray/10 p-2.5 text-sm font-bold">December 25, 2022</div>
|
|
<a href="javascript:" class="my-3 block text-[22px] leading-9 text-black transition line-clamp-2 hover:text-secondary dark:text-white"
|
|
>How to brace and breathe properly for weightlifting</a
|
|
>
|
|
<p class="mb-5 font-semibold line-clamp-3">
|
|
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
|
|
</p>
|
|
<a href="javascript:" class="text-secondary transition hover:text-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
<div class="group" data-aos="fade-up" data-aos-duration="1000">
|
|
<div class="overflow-hidden sm:h-64">
|
|
<img src="/assets/images/gym/news3.jpg" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-110" />
|
|
</div>
|
|
<div class="pt-5 font-extrabold">
|
|
<div class="inline-block bg-gray/10 p-2.5 text-sm font-bold">December 25, 2022</div>
|
|
<a href="javascript:" class="my-3 block text-[22px] leading-9 text-black transition line-clamp-2 hover:text-secondary dark:text-white"
|
|
>How to brace and breathe properly for weightlifting</a
|
|
>
|
|
<p class="mb-5 font-semibold line-clamp-3">
|
|
Various versions have evolved over the years, sometimes by accident, sometimes on purpose.
|
|
</p>
|
|
<a href="javascript:" class="text-secondary transition hover:text-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<style scoped>
|
|
.text-border-gray {
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-text-stroke-width: 2px;
|
|
-webkit-text-stroke-color: #7780a1;
|
|
}
|
|
.text-border-white {
|
|
-webkit-text-fill-color: transparent;
|
|
-webkit-text-stroke-width: 2px;
|
|
-webkit-text-stroke-color: #ffffff;
|
|
}
|
|
</style>
|