Access_New/pages/demo-gym-and-fitness-classes.html
2024-09-05 11:33:27 +05:45

354 lines
21 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/gym-and-fitness/gym-and-fitness.css" />
</head>
<body data-mobile-nav-style="classic" class="custom-cursor">
<div class="cursor-page-inner">
<div class="circle-cursor circle-cursor-inner"></div>
<div class="circle-cursor circle-cursor-outer"></div>
</div>
<header>
<nav class="navbar navbar-expand-lg header-transparent bg-transparent border-bottom border-color-transparent-dark-very-light disable-fixed">
<div class="container-fluid">
<div class="col-auto">
<a class="navbar-brand" href="demo-gym-and-fitness.html">
<img src="images/demo-gym-and-fitness-logo-black.png" data-at2x="images/demo-gym-and-fitness-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-gym-and-fitness-logo-black.png" data-at2x="images/demo-gym-and-fitness-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-gym-and-fitness-logo-black.png" data-at2x="images/demo-gym-and-fitness-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto me-0 sm-me-auto border-start border-color-transparent-dark-very-light ms-35px xs-ms-0">
<div class="header-icon">
<div class="header-push-button hamburger-push-button icon xs-pe-50px">
<div class="push-button">
<span></span>
<span></span>
<span></span>
<span></span>
<b class="push-button-text alt-font text-uppercase text-dark-gray position-absolute top-10px right-minus-50px">Menu</b>
</div>
</div>
</div>
</div>
<div class="col-auto ms-auto align-items-center d-none d-sm-flex">
<div class="header-button">
<a href="demo-gym-and-fitness-contact.html" class="btn btn-very-small btn-base-color btn-round-edge btn-box-shadow">Join us now</a>
</div>
</div>
</div>
</nav>
<div class="push-menu hamburger-nav header-dark hamburger-menu-half push-menu-left bg-dark-gray md-w-60 sm-w-100" style="background-image: url('images/demo-gym-and-fitness-menu-bg.jpg')">
<span class="close-menu text-dark-gray bg-white"><i class="fa-solid fa-xmark"></i></span>
<div class="d-flex flex-column justify-content-center h-100 ps-19 pe-19 pt-13 pb-13 xl-p-12 sm-p-20px">
<div>
<a class="hamburger-logo" href="demo-gym-and-fitness.html">
<img src="images/demo-gym-and-fitness-logo-white.png" data-at2x="images/demo-gym-and-fitness-logo-white@2x.png" alt>
</a>
</div>
<div class="hamburger-menu menu-list-wrapper w-80 lg-w-100 lg-no-margin sm-mt-auto sm-mb-auto" data-scroll-options="{ &quot;theme&quot;: &quot;light&quot; }">
<ul class="menu-item-list fw-500 ls-1px">
<li class="menu-item"><a href="demo-gym-and-fitness.html" class="nav-link">Home</a></li>
<li class="menu-item"><a href="demo-gym-and-fitness-about.html" class="nav-link">About</a></li>
<li class="menu-item"><a href="demo-gym-and-fitness-classes.html" class="nav-link">Classes</a></li>
<li class="menu-item"><a href="demo-gym-and-fitness-schedule.html" class="nav-link">Schedule</a></li>
<li class="menu-item"><a href="demo-gym-and-fitness-package.html" class="nav-link">Package</a></li>
<li class="menu-item"><a href="demo-gym-and-fitness-trainer.html" class="nav-link">Trainer</a></li>
<li class="menu-item"><a href="demo-gym-and-fitness-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="w-90 d-none d-lg-inline-block">
<div class="row row-cols-1 row-cols-xl-2">
<div class="col">
<span class="text-white fs-16 ls-05px">Crafto gym - London</span>
<div class="h-1px w-90 lg-w-100 bg-white-transparent-extra-light mt-10px mb-10px"></div>
<p class="fs-15 lh-26 w-90 xl-w-100">28 New regent view road, Orchard, Cambridge.</p>
</div>
<div class="col">
<span class="text-white fs-16 ls-05px">Connect with us</span>
<div class="h-1px w-90 lg-w-100 bg-white-transparent-extra-light mt-10px mb-10px"></div>
<p class="fs-15 lh-28 w-90 xl-w-100 lg-mb-0"><a href="cdn-cgi/l/email-protection.html#2c45424a436c5543595e4843414d4542024f4341" class="d-block text-white-hover"><span class="__cf_email__" data-cfemail="a1c8cfc7cee1d8ced4d3c5ceccc0c8cf8fc2cecc">[email&#160;protected]</span></a><a href="tel:12345678910" class="text-white-hover">+1 234 567 8910</a></p>
</div>
</div>
</div>
</div>
</div>
</header>
<section class="ipad-top-space-margin overflow-hidden bg-very-light-gray p-0 page-title-big-typography">
<div class="container">
<div class="row justify-content-center small-screen">
<div class="col-md-6 d-flex flex-column justify-content-center align-items-center align-items-md-start text-center text-md-start page-title-extra-small sm-pt-50px sm-pb-50px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h1 class="ls-0px fw-600 text-dark-gray d-inline-block text-decoration-line-bottom-medium border-color-base-color mb-25px">Fitness classes</h1>
<h2 class="fw-700 alt-font ls-minus-1px text-dark-gray w-80 mb-0 lg-w-100">The amazing way to start your day<span class="text-base-color">.</span></h2>
</div>
<div class="col-md-6">
<div class="outside-box-right-20 sm-outside-box-left-20 h-100 sm-h-300px xs-h-250px cover-background" style="background-image: url('images/demo-gym-and-fitness-classes-title-bg.jpg')"></div>
</div>
</div>
</div>
</section>
<section class="position-relative">
<img src="images/demo-gym-and-fitness-about-12.png" class="position-absolute left-0px bottom-30px d-none d-lg-inline-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" alt>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 md-mb-30px text-center" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1000, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<img src="images/demo-gym-and-fitness-classes-07.jpg" alt>
</div>
<div class="col-xl-5 col-lg-6 offset-xl-1" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-19 lh-20 ls-0px fw-600 text-dark-gray d-inline-block text-decoration-line-bottom-medium border-color-base-color mb-25px">About our classes</span>
<h2 class="h1 alt-font fw-700 ls-minus-1px text-dark-gray mb-15px">The best course at our fitness studio<span class="text-base-color">.</span></h2>
<p class="w-85 mb-30px xl-w-100">Lorem ipsum dolor amet consectetur adipiscing do eiusmod tempor incididunt abore dolore magna ut enim ad minim veniam ut exercitation ullamco commodo consequat incididunt.</p>
<a href="demo-gym-and-fitness-classes.html" class="btn btn-large btn-round-edge btn-dark-gray btn-slide-right me-15px">Explore classes<span class="bg-white"></span></a>
<a href="demo-gym-and-fitness-schedule.html" class="btn btn-link hover-text-light btn-extra-large text-dark-gray pb-0"><i class="bi bi-calendar-check lh-normal icon-extra-medium me-10px"></i>Explore schedule</a>
<div class="h-1px w-100 bg-extra-medium-gray mt-40px mb-20px md-mt-30px md-mb-10px"></div>
<div class="d-sm-flex align-items-center text-center text-sm-start">
<div class="me-15px flex-shrink-0 xs-me-0"><img src="images/demo-gym-and-fitness-about-04.png" alt></div>
<div class="fs-22 lh-26 fw-500 alt-font text-dark-gray w-40 xs-w-100"><span class="fw-700">2350+</span> People already join our fitness studio.</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-5 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="h1 alt-font fw-700 ls-minus-1px text-dark-gray mb-0">Fitness classes</h2>
<p>Lorem ipsum dol consectetur adipiscing.</p>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-3 row-cols-lg-2 row-cols-md-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;scale&quot;:[0.9,1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col mb-30px">
<div class="interactive-banner-style-04 transition-inner-all">
<figure class="m-0 hover-box position-relative overflow-hidden border-radius-6px">
<img src="images/demo-gym-and-fitness-classes-01.jpg" alt />
<div class="overlay-bg bg-gradient-gray-light-dark-transparent opacity-full-dark"></div>
<figcaption class="d-flex flex-column justify-content-end h-100 w-100 p-25px">
<div class="d-flex flex-column justify-content-center align-items-center last-paragraph-no-margin text-center features-content p-40px lg-p-50px md-p-25px">
<div class="position-relative z-index-1">
<img src="images/demo-gym-and-fitness-classes-icon-01.png" class="h-60px mb-15px" alt>
<a href="demo-gym-and-fitness-schedule.html" class="d-block alt-font fw-500 text-dark-gray text-dark-gray-hover box-title fs-24">Kickboxing</a>
<p class="text-dark-gray opacity-6 fw-500">Lorem ipsum do consectetur adipiscing elit do eiusmod.</p>
<a href="demo-gym-and-fitness-schedule.html" class="d-flex justify-content-center align-items-center w-60px h-60px rounded-circle bg-white mx-auto mt-20px"><i class="fa-solid fa-arrow-right text-dark-gray icon-small"></i></a>
</div>
<div class="box-overlay bg-base-color border-radius-6px"></div>
</div>
<div class="fs-26 alt-font fw-500 text-center text-white box-button p-15px border-radius-2px d-inline-block">Kickboxing</div>
</figcaption>
</figure>
</div>
</div>
<div class="col mb-30px">
<div class="interactive-banner-style-04 transition-inner-all">
<figure class="m-0 hover-box position-relative overflow-hidden border-radius-6px">
<img src="images/demo-gym-and-fitness-classes-02.jpg" alt />
<div class="overlay-bg bg-gradient-gray-light-dark-transparent opacity-full-dark"></div>
<figcaption class="d-flex flex-column justify-content-end h-100 w-100 p-25px">
<div class="d-flex flex-column justify-content-center align-items-center last-paragraph-no-margin text-center features-content p-40px lg-p-50px md-p-25px">
<div class="position-relative z-index-1">
<img src="images/demo-gym-and-fitness-classes-icon-02.png" class="h-60px mb-15px" alt>
<a href="demo-gym-and-fitness-schedule.html" class="d-block alt-font fw-500 text-dark-gray text-dark-gray-hover box-title fs-24">Workout</a>
<p class="text-dark-gray opacity-6 fw-500">Lorem ipsum do consectetur adipiscing elit do eiusmod.</p>
<a href="demo-gym-and-fitness-schedule.html" class="d-flex justify-content-center align-items-center w-60px h-60px rounded-circle bg-white mx-auto mt-20px"><i class="fa-solid fa-arrow-right text-dark-gray icon-small"></i></a>
</div>
<div class="box-overlay bg-base-color border-radius-6px"></div>
</div>
<div class="fs-26 alt-font fw-500 text-center text-white box-button p-15px border-radius-2px d-inline-block">Workout</div>
</figcaption>
</figure>
</div>
</div>
<div class="col mb-30px">
<div class="interactive-banner-style-04 transition-inner-all">
<figure class="m-0 hover-box position-relative overflow-hidden border-radius-6px">
<img src="images/demo-gym-and-fitness-classes-03.jpg" alt />
<div class="overlay-bg bg-gradient-gray-light-dark-transparent opacity-full-dark"></div>
<figcaption class="d-flex flex-column justify-content-end h-100 w-100 p-25px">
<div class="d-flex flex-column justify-content-center align-items-center last-paragraph-no-margin text-center features-content p-40px lg-p-50px md-p-25px">
<div class="position-relative z-index-1">
<img src="images/demo-gym-and-fitness-classes-icon-03.png" class="h-60px mb-15px" alt>
<a href="demo-gym-and-fitness-schedule.html" class="d-block alt-font fw-500 text-dark-gray text-dark-gray-hover box-title fs-24">Strength</a>
<p class="text-dark-gray opacity-6 fw-500">Lorem ipsum do consectetur adipiscing elit do eiusmod.</p>
<a href="demo-gym-and-fitness-schedule.html" class="d-flex justify-content-center align-items-center w-60px h-60px rounded-circle bg-white mx-auto mt-20px"><i class="fa-solid fa-arrow-right text-dark-gray icon-small"></i></a>
</div>
<div class="box-overlay bg-base-color border-radius-6px"></div>
</div>
<div class="fs-26 alt-font fw-500 text-center text-white box-button p-15px border-radius-2px d-inline-block">Strength</div>
</figcaption>
</figure>
</div>
</div>
<div class="col lg-mb-30px">
<div class="interactive-banner-style-04 transition-inner-all">
<figure class="m-0 hover-box position-relative overflow-hidden border-radius-6px">
<img src="images/demo-gym-and-fitness-classes-04.jpg" alt />
<div class="overlay-bg bg-gradient-gray-light-dark-transparent opacity-full-dark"></div>
<figcaption class="d-flex flex-column justify-content-end h-100 w-100 p-25px">
<div class="d-flex flex-column justify-content-center align-items-center last-paragraph-no-margin text-center features-content p-40px lg-p-50px md-p-25px">
<div class="position-relative z-index-1">
<img src="images/demo-gym-and-fitness-classes-icon-04.png" class="h-60px mb-15px" alt>
<a href="demo-gym-and-fitness-schedule.html" class="d-block alt-font fw-500 text-dark-gray text-dark-gray-hover box-title fs-24">Running</a>
<p class="text-dark-gray opacity-6 fw-500">Lorem ipsum do consectetur adipiscing elit do eiusmod.</p>
<a href="demo-gym-and-fitness-schedule.html" class="d-flex justify-content-center align-items-center w-60px h-60px rounded-circle bg-white mx-auto mt-20px"><i class="fa-solid fa-arrow-right text-dark-gray icon-small"></i></a>
</div>
<div class="box-overlay bg-base-color border-radius-6px"></div>
</div>
<div class="fs-26 alt-font fw-500 text-center text-white box-button p-15px border-radius-2px d-inline-block">Running</div>
</figcaption>
</figure>
</div>
</div>
<div class="col sm-mb-30px">
<div class="interactive-banner-style-04 transition-inner-all">
<figure class="m-0 hover-box position-relative overflow-hidden border-radius-6px">
<img src="images/demo-gym-and-fitness-classes-05.jpg" alt />
<div class="overlay-bg bg-gradient-gray-light-dark-transparent opacity-full-dark"></div>
<figcaption class="d-flex flex-column justify-content-end h-100 w-100 p-25px">
<div class="d-flex flex-column justify-content-center align-items-center last-paragraph-no-margin text-center features-content p-40px lg-p-50px md-p-25px">
<div class="position-relative z-index-1">
<img src="images/demo-gym-and-fitness-classes-icon-05.png" class="h-60px mb-15px" alt>
<a href="demo-gym-and-fitness-schedule.html" class="d-block alt-font fw-500 text-dark-gray text-dark-gray-hover box-title fs-24">Meditation</a>
<p class="text-dark-gray opacity-6 fw-500">Lorem ipsum do consectetur adipiscing elit do eiusmod.</p>
<a href="demo-gym-and-fitness-schedule.html" class="d-flex justify-content-center align-items-center w-60px h-60px rounded-circle bg-white mx-auto mt-20px"><i class="fa-solid fa-arrow-right text-dark-gray icon-small"></i></a>
</div>
<div class="box-overlay bg-base-color border-radius-6px"></div>
</div>
<div class="fs-26 alt-font fw-500 text-center text-white box-button p-15px border-radius-2px d-inline-block">Meditation</div>
</figcaption>
</figure>
</div>
</div>
<div class="col">
<div class="interactive-banner-style-04 transition-inner-all">
<figure class="m-0 hover-box position-relative overflow-hidden border-radius-6px">
<img src="images/demo-gym-and-fitness-classes-06.jpg" alt />
<div class="overlay-bg bg-gradient-gray-light-dark-transparent opacity-full-dark"></div>
<figcaption class="d-flex flex-column justify-content-end h-100 w-100 p-25px">
<div class="d-flex flex-column justify-content-center align-items-center last-paragraph-no-margin text-center features-content p-40px lg-p-50px md-p-25px">
<div class="position-relative z-index-1">
<img src="images/demo-gym-and-fitness-classes-icon-06.png" class="h-60px mb-15px" alt>
<a href="demo-gym-and-fitness-schedule.html" class="d-block alt-font fw-500 text-dark-gray text-dark-gray-hover box-title fs-24">Spinning</a>
<p class="text-dark-gray opacity-6 fw-500">Lorem ipsum do consectetur adipiscing elit do eiusmod.</p>
<a href="demo-gym-and-fitness-schedule.html" class="d-flex justify-content-center align-items-center w-60px h-60px rounded-circle bg-white mx-auto mt-20px"><i class="fa-solid fa-arrow-right text-dark-gray icon-small"></i></a>
</div>
<div class="box-overlay bg-base-color border-radius-6px"></div>
</div>
<div class="fs-26 alt-font fw-500 text-center text-white box-button p-15px border-radius-2px d-inline-block">Spinning</div>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
<footer class="half-footer bg-nero-grey position-relative pb-0">
<div class="container">
<div class="row justify-content-center align-items-center align-items-lg-end mb-5 text-center text-sm-start sm-mb-30px">
<div class="col-lg-3 col-md-12 col-sm-6 text-lg-start text-md-center md-mb-30px">
<a href="demo-gym-and-fitness.html" class="footer-logo d-inline-block">
<img src="images/demo-gym-and-fitness-logo-white.png" data-at2x="images/demo-gym-and-fitness-logo-white@2x.png" alt>
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 fs-16 lh-26 fw-500 last-paragraph-no-margin sm-mb-30px">
<span class="text-white ls-05px d-block fs-17 mb-5px">Start a conversation</span>
<div><i class="feather icon-feather-phone-call icon-very-small me-10px"></i><a href="tel:12345678910">+1 234 567 8910</a></div>
<div><i class="feather icon-feather-mail icon-very-small me-10px"></i><a href="cdn-cgi/l/email-protection.html#b1d8dfd7def1d5dedcd0d8df9fd2dedc" class="text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="6a03040c052a0e05070b030444090507">[email&#160;protected]</span></a></div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 fs-16 lh-26 fw-500 last-paragraph-no-margin xs-mb-30px">
<span class="text-white ls-05px d-block fs-17 mb-5px">Current location</span>
<p class="w-90 xs-w-70 xs-mx-auto">2644 Rosella inlet suite Keithmouth, Bilzen 25422</p>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 fs-16 lh-26 fw-500 last-paragraph-no-margin">
<span class="text-white ls-05px d-block fs-17 mb-5px">Center timings</span>
<span class="d-block">Mon-fri: 09 am 08 pm</span>
<span class="d-block">Saturday: 09 am 01 pm</span>
</div>
</div>
<div class="footer-bottom position-relative pt-25px pb-25px border-top border-color-transparent-white-light">
<div class="row align-items-center">
<div class="col-lg-4 text-center text-lg-start md-mb-15px">
<span class="fs-16 fw-500">&COPY; Copyright 2024 <a href="index.html" target="_blank" class="text-white text-decoration-line-bottom">Crafto</a></span>
</div>
<div class="col-lg-8 text-center text-lg-end">
<ul class="footer-navbar fs-16 fw-500">
<li class="nav-item"><a href="demo-gym-and-fitness.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-gym-and-fitness-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-gym-and-fitness-classes.html" class="nav-link">Classes</a></li>
<li class="nav-item"><a href="demo-gym-and-fitness-schedule.html" class="nav-link">Schedule</a></li>
<li class="nav-item"><a href="demo-gym-and-fitness-package.html" class="nav-link">Package</a></li>
<li class="nav-item"><a href="demo-gym-and-fitness-trainer.html" class="nav-link">Trainer</a></li>
<li class="nav-item"><a href="demo-gym-and-fitness-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-gym-and-fitness-classes.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>