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

479 lines
26 KiB
HTML
Raw 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#4a23242c250a33253f382e25272b232464292527" class="d-block text-white-hover"><span class="__cf_email__" data-cfemail="abc2c5cdc4ebd2c4ded9cfc4c6cac2c585c8c4c6">[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">About fitness studio</h1>
<h2 class="fw-700 alt-font ls-minus-1px text-dark-gray w-80 mb-0 lg-w-100">We will give you strength & health<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-about-title-bg.jpg');"></div>
</div>
</div>
</div>
</section>
<section class="position-relative pb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-xl-6 order-2 order-lg-1 align-self-end position-relative" 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; }">
<img src="images/demo-gym-and-fitness-about-01.jpg" alt />
<img src="images/demo-gym-and-fitness-about-15.png" alt class="position-absolute right-minus-20px top-100px lg-w-45 lg-top-60px md-w-35 md-right-100px sm-right-20px xs-right-0px" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" />
</div>
<div class="col-lg-6 col-xxl-4 col-xl-5 offset-xl-1 order-1 order-lg-2 md-mb-50px sm-mb-30px" 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-30px">Grow your fitness strength</span>
<h2 class="h1 alt-font fw-700 ls-minus-1px text-dark-gray mb-15px">We help enhance your workout<span class="text-base-color">.</span></h2>
<p class="mb-30px">Lorem ipsum dolor amet consectetur adipiscing eiusmod tempor incididunt abore dolore magna ut enim ad minim veniam 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">Fitness classes<span class="bg-white"></span></a>
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="btn btn-link hover-text-light btn-extra-large text-dark-gray popup-youtube pb-0"><i class="bi bi-play-circle align-middle lh-normal icon-extra-medium me-5px"></i>About facilities</a>
</div>
</div>
</div>
</section>
<section class="bg-gradient-very-light-gray border-bottom border-color-extra-medium-gray position-relative pt-20px pb-20px">
<img src="images/demo-gym-and-fitness-about-03.png" class="position-absolute right-0px bottom-90px lg-w-15 md-w-20 d-none d-md-block" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)" alt>
<div class="container">
<div class="row align-items-center justify-content-center g-0">
<div class="col-auto align-items-center d-block d-sm-flex text-center text-sm-start" 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; }">
<img src="images/demo-gym-and-fitness-about-04.png" class="me-5px xs-me-0" alt />
<div class="ls-0px fs-24 lh-28 fw-500 alt-font text-dark-gray last-paragraph-no-margin">
<p>Rated by 4.8 of 5.0 based on our satisfied customer <span class="fw-600 text-decoration-line-bottom text-dark-gray">1058 reviews!</span><a href="https://www.reviews.io/" target="_blank"><img src="images/reviewsio.svg" class="h-25px md-h-20px align-middle ms-15px" alt></a></p>
</div>
</div>
</div>
</div>
</section>
<section class="pb-0">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-xl-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">Amazing facilities</h2>
<p>Lorem ipsum dolor amet consectetur adipiscing.</p>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 row-cols-sm-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-30, 0], &quot;translateY&quot;: [50, 0], &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 text-center rotate-box-style-01 mb-30px">
<div class="rm-rotate-box text-center">
<div class="flipper to-left">
<div class="thumb-wrap">
<div class="front overflow-hidden h-280px border-radius-4px" style="background-image:url('images/demo-gym-and-fitness-about-05.jpg')">
</div>
<div class="back border-radius-4px overflow-hidden">
<div class="box-overlay bg-dark-gray"></div>
<div class="content-wrap p-40px sm-p-30px last-paragraph-no-margin">
<img src="images/demo-gym-and-fitness-about-icon-01.png" class="h-70px mb-15px" alt />
<p class="text-white opacity-5">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
</div>
</div>
<span class="fs-22 fw-500 alt-font text-dark-gray d-inline-block mt-25px">Fitness training</span>
</div>
</div>
</div>
<div class="col text-center rotate-box-style-01 mb-30px">
<div class="rm-rotate-box text-center">
<div class="flipper to-left">
<div class="thumb-wrap">
<div class="front overflow-hidden h-280px border-radius-4px" style="background-image:url('images/demo-gym-and-fitness-about-06.jpg')">
</div>
<div class="back border-radius-4px overflow-hidden">
<div class="box-overlay bg-dark-gray"></div>
<div class="content-wrap p-40px sm-p-30px last-paragraph-no-margin">
<img src="images/demo-gym-and-fitness-about-icon-02.png" class="h-70px mb-15px" alt />
<p class="text-white opacity-5">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
</div>
</div>
<span class="fs-22 fw-500 alt-font text-dark-gray d-inline-block mt-25px">Free weights</span>
</div>
</div>
</div>
<div class="col text-center rotate-box-style-01 mb-30px">
<div class="rm-rotate-box text-center">
<div class="flipper to-left">
<div class="thumb-wrap">
<div class="front overflow-hidden h-280px border-radius-4px" style="background-image:url('images/demo-gym-and-fitness-about-07.jpg')">
</div>
<div class="back border-radius-4px overflow-hidden">
<div class="box-overlay bg-dark-gray"></div>
<div class="content-wrap p-40px sm-p-30px last-paragraph-no-margin">
<img src="images/demo-gym-and-fitness-about-icon-03.png" class="h-70px mb-15px" alt />
<p class="text-white opacity-5">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
</div>
</div>
<span class="fs-22 fw-500 alt-font text-dark-gray d-inline-block mt-25px">Floating yoga</span>
</div>
</div>
</div>
<div class="col text-center rotate-box-style-01 md-mb-30px">
<div class="rm-rotate-box text-center">
<div class="flipper to-left">
<div class="thumb-wrap">
<div class="front overflow-hidden h-280px border-radius-4px" style="background-image:url('images/demo-gym-and-fitness-about-08.jpg')">
</div>
<div class="back border-radius-4px overflow-hidden">
<div class="box-overlay bg-dark-gray"></div>
<div class="content-wrap p-40px sm-p-30px last-paragraph-no-margin">
<img src="images/demo-gym-and-fitness-about-icon-04.png" class="h-70px mb-15px" alt />
<p class="text-white opacity-5">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
</div>
</div>
<span class="fs-22 fw-500 alt-font text-dark-gray d-inline-block mt-25px">Fitness equipment</span>
</div>
</div>
</div>
<div class="col text-center rotate-box-style-01 sm-mb-30px">
<div class="rm-rotate-box text-center">
<div class="flipper to-left">
<div class="thumb-wrap">
<div class="front overflow-hidden h-280px border-radius-4px" style="background-image:url('images/demo-gym-and-fitness-about-09.jpg')">
</div>
<div class="back border-radius-4px overflow-hidden">
<div class="box-overlay bg-dark-gray"></div>
<div class="content-wrap p-40px sm-p-30px last-paragraph-no-margin">
<img src="images/demo-gym-and-fitness-about-icon-05.png" class="h-70px mb-15px" alt />
<p class="text-white opacity-5">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
</div>
</div>
<span class="fs-22 fw-500 alt-font text-dark-gray d-inline-block mt-25px">Premium classes</span>
</div>
</div>
</div>
<div class="col text-center rotate-box-style-01">
<div class="rm-rotate-box text-center">
<div class="flipper to-left">
<div class="thumb-wrap">
<div class="front overflow-hidden h-280px border-radius-4px" style="background-image:url('images/demo-gym-and-fitness-about-10.jpg')">
</div>
<div class="back border-radius-4px overflow-hidden">
<div class="box-overlay bg-dark-gray"></div>
<div class="content-wrap p-40px sm-p-30px last-paragraph-no-margin">
<img src="images/demo-gym-and-fitness-about-icon-06.png" class="h-70px mb-15px" alt>
<p class="text-white opacity-5">Lorem ipsum dolor consectetur adipiscing eiusmod tempor.</p>
</div>
</div>
</div>
<span class="fs-22 fw-500 alt-font text-dark-gray d-inline-block mt-25px">Boxing area</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="position-relative pb-0 z-index-0">
<img src="images/demo-gym-and-fitness-about-11.png" class="position-absolute right-0px bottom-30px d-none d-xl-inline-block z-index-minus-1" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" alt>
<div class="container">
<div class="row">
<div class="col-xl-4 col-md-6 col-lg-5 order-2 order-lg-1 pt-70px pb-70px sm-pt-0 sm-pb-40px" 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">Why crafto fitness studio first</span>
<h2 class="h1 alt-font fw-700 ls-minus-1px text-dark-gray mb-15px">Best training for your health<span class="text-base-color">.</span></h2>
<p class="w-85 xl-w-100">Lorem ipsum dolor amet consectetur adipiscing do eiusmod tempor incididunt abore dolore magna ut enim ad minim veniam ut exercitation.</p>
<div class="d-flex align-items-center">
<i class="bi bi-telephone-outbound icon-extra-medium text-base-color me-10px"></i><a href="tel:1800222000" class="fs-15 lh-16 fw-700 text-uppercase text-dark-gray text-decoration-line-bottom">Call for joining</a>
</div>
</div>
<div class="col-xl-4 col-md-6 col-lg-3 order-2 order-lg-1 align-self-end text-center" data-anime="{ &quot;scale&quot;:[0.9,1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1500, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<img src="images/demo-gym-and-fitness-about-11.jpg" alt>
</div>
<div class="col-md-12 col-lg-4 order-1 order-lg-2 pt-70px pb-70px md-pt-0 sm-pb-40px">
<div class="accordion accordion-style-01" id="accordion-style-01" data-active-icon="fa-angle-down" data-inactive-icon="fa-angle-right" 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; }">
<div class="accordion-item bg-white active-accordion">
<div class="accordion-header">
<a href="demo-gym-and-fitness-about.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-01" aria-expanded="true" data-bs-parent="#accordion-style-01">
<div class="accordion-title fs-20 fw-500 alt-font position-relative d-flex align-items-center pe-20px text-dark-gray mb-0 lg-fs-18"><i class="bi bi-heart-fill text-base-color me-10px"></i>Best and unique facilities<span><i class="fa-solid fa-angle-down icon-small"></i></span></div>
</a>
</div>
<div id="accordion-style-01-01" class="accordion-collapse collapse show" data-bs-parent="#accordion-style-01">
<div class="accordion-body last-paragraph-no-margin">
<p>Lorem ipsum consecte adipiscing placerat vestibulum vivamus eros ante suscipit.</p>
</div>
</div>
</div>
<div class="accordion-item bg-white">
<div class="accordion-header">
<a href="demo-gym-and-fitness-about.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-02" aria-expanded="false" data-bs-parent="#accordion-style-01">
<div class="accordion-title fs-20 fw-500 alt-font position-relative d-flex align-items-center pe-20px text-dark-gray mb-0 lg-fs-18"><i class="bi bi-patch-check-fill text-base-color me-10px"></i>Cost effective fitness studio<span><i class="fa-solid fa-angle-right icon-small"></i></span></div>
</a>
</div>
<div id="accordion-style-01-02" class="accordion-collapse collapse" data-bs-parent="#accordion-style-01">
<div class="accordion-body last-paragraph-no-margin">
<p>Lorem ipsum consecte adipiscing placerat vestibulum vivamus eros ante suscipit.</p>
</div>
</div>
</div>
<div class="accordion-item bg-white">
<div class="accordion-header">
<a href="demo-gym-and-fitness-about.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-01-03" aria-expanded="false" data-bs-parent="#accordion-style-01">
<div class="accordion-title fs-20 fw-500 alt-font position-relative d-flex align-items-center pe-20px text-dark-gray mb-0 lg-fs-18"><i class="bi bi-play-circle-fill align-middle text-base-color me-10px"></i>Proffesional trainers tutorial<span><i class="fa-solid fa-angle-right icon-small"></i></span></div>
</a>
</div>
<div id="accordion-style-01-03" class="accordion-collapse collapse" data-bs-parent="#accordion-style-01">
<div class="accordion-body last-paragraph-no-margin">
<p>Lorem ipsum consecte adipiscing placerat vestibulum vivamus eros ante suscipit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="border-top border-color-extra-medium-gray half-section">
<div class="container">
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 justify-content-center counter-style-07">
<div class="col text-center sm-mb-35px">
<h1 class="alt-font vertical-counter d-inline-flex text-dark-gray fw-700 mb-0 ls-minus-2px md-ls-0px position-relative z-index-0" data-to="4566">
<span class="text-highlight position-absolute bottom-10px w-100"><span class="bg-base-color h-10px bottom-0px opacity-4"></span></span>
</h1>
<span class="d-block fs-15 lh-20 fw-700 text-uppercase text-dark-gray">Hours exercise</span>
</div>
<div class="col text-center sm-mb-35px">
<h1 class="alt-font vertical-counter d-inline-flex text-dark-gray fw-700 mb-0 ls-minus-2px md-ls-0px position-relative" data-to="5635">
<span class="text-highlight position-absolute bottom-10px w-100"><span class="bg-base-color h-10px bottom-0px opacity-4"></span></span>
</h1>
<span class="d-block fs-15 lh-20 fw-700 text-uppercase text-dark-gray">Total equipment</span>
</div>
<div class="col text-center xs-mb-35px">
<h1 class="alt-font vertical-counter d-inline-flex text-dark-gray fw-700 mb-0 ls-minus-2px md-ls-0px position-relative" data-to="6546">
<span class="text-highlight position-absolute bottom-10px w-100"><span class="bg-base-color h-10px bottom-0px opacity-4"></span></span>
</h1>
<span class="d-block fs-15 lh-20 fw-700 text-uppercase text-dark-gray">Training people</span>
</div>
<div class="col text-center">
<h1 class="alt-font vertical-counter d-inline-flex text-dark-gray fw-700 mb-0 ls-minus-2px md-ls-0px position-relative" data-to="6365">
<span class="text-highlight position-absolute bottom-10px w-100"><span class="bg-base-color h-10px bottom-0px opacity-4"></span></span>
</h1>
<span class="d-block fs-15 lh-20 fw-700 text-uppercase text-dark-gray">Expert trainers</span>
</div>
</div>
</div>
</section>
<section class="p-0 position-relative">
<img src="images/demo-gym-and-fitness-about-12.png" class="position-absolute left-0px top-minus-100px d-none d-lg-block" alt>
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-12">
<img src="images/demo-gym-and-fitness-about-13.jpg" class="w-100" alt>
</div>
</div>
<div class="container position-relative xs-pe-0 xs-ps-0">
<div class="row g-0 justify-content-center align-items-center">
<div class="col-md-12 col-xxl-10 col-xl-11 text-center position-absolute xs-position-relative bottom-130px lg-bottom-20px xs-bottom-0px border-radius-6px box-shadow-double-large bg-white p-25px last-paragraph-no-margin xs-border-radius-0">
<h5 class="ls-minus-1px alt-font text-dark-gray d-inline-block align-middle mb-0"><img src="images/demo-gym-and-fitness-about-14.jpg" class="align-middle h-50px me-15px" alt>We are expert all over the world coaches</h5>
<div class="separator-line-1px bg-extra-medium-gray d-inline-block align-middle w-130px ms-20px me-20px mt-5px d-none d-lg-inline-block"></div>
<a href="demo-gym-and-fitness-trainer.html" class="fs-32 lh-32 ls-minus-1px alt-font text-dark-gray d-inline-block align-middle">Meet our expert team<i class="fa-solid fa-arrow-right align-middle icon-small ms-5px"></i></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#8fe6e1e9e0cfebe0e2eee6e1a1ece0e2" class="text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="3f565159507f5b50525e5651115c5052">[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-about.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>