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

376 lines
20 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#f0999e969fb0899f8582949f9d91999ede939f9d" class="d-block text-white-hover"><span class="__cf_email__" data-cfemail="0d64636b624d7462787f6962606c6463236e6260">[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 trainers</h1>
<h2 class="fw-700 alt-font ls-minus-1px text-dark-gray w-80 mb-0 lg-w-100">Multiple award winning trainers<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-trainer-title-bg.jpg');"></div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 md-mb-50px sm-mb-40px" 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; }">
<h2 class="alt-font fw-700 ls-minus-1px text-dark-gray mb-10px">Get your perfect workout with the perfect trainers<span class="text-base-color">.</span></h2>
<img src="images/demo-gym-and-fitness-trainer-signechar.png" alt>
</div>
<div class="col-xl-6 col-lg-7 offset-xl-1">
<div class="row align-items-center">
<div class="col-12 icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon position-relative" data-anime="{ &quot;scale&quot;:[0.9,1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1000, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="h-70px w-70px rounded-circle bg-base-color d-flex align-items-center justify-content-center position-absolute left-minus-10px top-minus-10px">
<i class="bi bi-award icon-very-medium text-white"></i>
</div>
<img src="images/demo-gym-and-fitness-trainer-01.jpg" class="rounded-circle h-180px xs-h-130px" alt>
</div>
<div class="feature-box-content last-paragraph-no-margin" 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; }">
<span class="fs-20 ls-0px fw-600 text-dark-gray d-block mb-5px">Grow your fitness strength.</span>
<p class="w-90 lg-w-100">Lorem ipsum dolor amet consectetur adipiscing eiusmod tempor incididunt abore dolore magna.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="position-relative pt-0 z-index-0">
<div class="position-absolute left-0px top-0px z-index-minus-1 lg-w-70 xl-left-minus-150px lg-left-minus-250px d-none d-md-inline-block" data-anime="{ &quot;translateX&quot;: [-250, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<img src="images/demo-gym-and-fitness-trainer-02.jpg" alt>
</div>
<div class="container">
<div class="row justify-content-end mb-9 sm-mb-50px">
<div class="col-xl-7 col-lg-8 col-md-9" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
<div class="row g-0 row-cols-1 row-cols-sm-2">
<div class="col p-55px xl-p-40px lg-p-35px bg-white box-shadow-quadruple-large">
<h4 class="alt-font fw-600 text-dark-gray mb-0">Matthew taylor</h4>
<span class="fs-18 fw-500 text-base-color">Strength training</span>
<div class="divider-style-03 divider-style-03-01 border-color-extra-medium-gray mt-15px mb-15px"></div>
<p>Lorem ipsum dolor consecte adiscing placerat vestibulum vivamus eget ante.</p>
<div class="d-flex align-items-center mb-30px">
<div class="col-auto text-center"><h3 class="fw-700 ls-minus-3px text-dark-gray mb-0 xs-ls-minus-2px">5.0</h3></div>
<div class="col border-start border-color-extra-medium-gray ms-20px ps-20px">
<div class="review-star-icon fs-18">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<span class="fs-15 lh-22 fw-600 d-block text-dark-gray">2070 Reviews</span>
</div>
</div>
<div class="elements-social social-icon-style-09">
<ul class="medium-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
</ul>
</div>
</div>
<div class="col position-relative cover-background xs-h-400px" style="background-image:url('images/demo-gym-and-fitness-home-15.jpg');">
<span class="fs-190 fw-700 alt-font text-white position-absolute left-minus-30px bottom-minus-50px sm-bottom-minus-40px sm-left-minus-10px">01.</span>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-xl-4 row-cols-lg-3 row-cols-sm-2 justify-content-center" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col team-style-08 border-radius-6px mb-30px">
<figure class="mb-0 position-relative border-radius-6px overflow-hidden">
<img src="images/team-47.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 bg-gradient-white-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-20 fw-500 alt-font text-dark-gray d-block">Herman miller</span>
<span class="member-designation fs-15 lh-20 d-block">Body building</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.twitter.com/" target="_blank" class="bg-white border border-color-extra-medium-gray"><i class="fa-brands fa-twitter icon-small text-dark-gray"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 mb-30px">
<figure class="mb-0 position-relative border-radius-6px overflow-hidden">
<img src="images/team-48.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 bg-gradient-white-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-20 fw-500 alt-font text-dark-gray d-block">Michal ruheen</span>
<span class="member-designation fs-15 lh-20 d-block">Muscle gain</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.facebook.com/" target="_blank" class="bg-white border border-color-extra-medium-gray"><i class="fa-brands fa-facebook-f icon-small text-dark-gray"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 mb-30px">
<figure class="mb-0 position-relative border-radius-6px overflow-hidden">
<img src="images/team-49.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 bg-gradient-white-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-20 fw-500 alt-font text-dark-gray d-block">Jenny roy</span>
<span class="member-designation fs-15 lh-20 d-block">Weight loss</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.linkedin.com/" target="_blank" class="bg-white border border-color-extra-medium-gray"><i class="fa-brands fa-linkedin-in icon-small text-dark-gray"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 mb-30px">
<figure class="mb-0 position-relative border-radius-6px overflow-hidden">
<img src="images/team-50.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 bg-gradient-white-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-20 fw-500 alt-font text-dark-gray d-block">Jessica dover</span>
<span class="member-designation fs-15 lh-20 d-block">Meditation</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.twitter.com/" target="_blank" class="bg-white border border-color-extra-medium-gray"><i class="fa-brands fa-twitter icon-small text-dark-gray"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 lg-mb-30px">
<figure class="mb-0 position-relative border-radius-6px overflow-hidden">
<img src="images/team-51.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 bg-gradient-white-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-20 fw-500 alt-font text-dark-gray d-block">Arafa sherief</span>
<span class="member-designation fs-15 lh-20 d-block">Advanced training</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.linkedin.com/" target="_blank" class="bg-white border border-color-extra-medium-gray"><i class="fa-brands fa-linkedin-in icon-small text-dark-gray"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 lg-mb-30px">
<figure class="mb-0 position-relative border-radius-6px overflow-hidden">
<img src="images/team-52.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 bg-gradient-white-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-20 fw-500 alt-font text-dark-gray d-block">Jeremy dupont</span>
<span class="member-designation fs-15 lh-20 d-block">Strength training</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.facebook.com/" target="_blank" class="bg-white border border-color-extra-medium-gray"><i class="fa-brands fa-facebook-f icon-small text-dark-gray"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col team-style-08 xs-mb-30px">
<figure class="mb-0 position-relative border-radius-6px overflow-hidden">
<img src="images/team-53.jpg" alt />
<figcaption class="w-100 h-100 d-flex align-items-end p-13 bg-gradient-white-dark-transparent">
<div class="w-100">
<span class="team-member-name fs-20 fw-500 alt-font text-dark-gray d-block">Lisa pedersen</span>
<span class="member-designation fs-15 lh-20 d-block">Basic fitness</span>
</div>
<div class="social-icon d-flex flex-column flex-shrink-1">
<a href="https://www.linkedin.com/" target="_blank" class="bg-white border border-color-extra-medium-gray"><i class="fa-brands fa-linkedin-in icon-small text-dark-gray"></i></a>
</div>
</figcaption>
</figure>
</div>
<div class="col text-center team-style-02 border-radius-6px position-relative">
<div class="h-100 d-flex flex-column justify-content-center align-items-center border-radius-6px border-dashed border-2 border-color-extra-medium-gray p-40px lg-p-30px xs-h-350px">
<div class="fs-40 fw-300 h-100px w-100px bg-very-light-gray d-flex justify-content-center align-items-center position-absolute mb-70px start-50 translate-middle-x rounded-circle border-dashed border-2 border-color-extra-medium-gray">+</div>
<a href="demo-gym-and-fitness-contact.html" class="btn btn-small btn-round-edge btn-dark-gray btn-slide-right mt-auto">Join our team<span class="bg-white"></span></a>
</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#83eaede5ecc3e7eceee2eaedade0ecee" class="text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="036a6d656c43676c6e626a6d2d606c6e">[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-trainer.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>