Total Body Fitness
about us
our facilities
We will coach you and help you achieve your health goals. At garage, we can help you every step of the way. Join our family and own your fitness. What are you waiting for? Take the first step today.
our staff
We will coach you and help you achieve your health goals. At garage, we can help you every step of the way. Join our family and own your fitness. What are you waiting for? Take the first step today.
our plans
We will coach you and help you achieve your health goals. At garage, we can help you every step of the way. Join our family and own your fitness. What are you waiting for? Take the first step today.
1
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slider-container {
width: 100%;
max-width: 800px;
height: 400px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider {
display: flex;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
height: 100%;
position: relative;
}
.slide::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}
.slide-content {
position: absolute;
bottom: 40px;
left: 40px;
color: #fff;
z-index: 2;
font-family: "Inter", sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.slide-title {
font-size: 32px;
margin: 0;
font-weight: 600;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
animation-delay: 0.3s;
}
.slide-description {
font-size: 18px;
margin: 8px 0;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
animation-delay: 0.5s;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
cursor: pointer;
}
.slider-arrow:hover {
background: rgba(255, 255, 255, 0.3);
}
.slider-arrow svg {
width: 30px;
color: #fff;
display: flex;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
/* Navigation dots */
.slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 2;
}
.nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.nav-dot.active {
background: #fff;
transform: scale(1.2);
}
const slides = document.querySelectorAll(".slide");
const sliderNav = document.querySelector(".slider-nav");
const slider = document.querySelector(".slider");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
let currentSlide = 0;
let slideCount = slides.length;
let intervalId = null;
slides.forEach((_, index) => {
const dot = document.createElement("div");
dot.classList.add("nav-dot");
if (index === 0) dot.classList.add("active");
dot.addEventListener("click", () => {
goToSlide(index);
});
sliderNav.appendChild(dot);
});
const dots = document.querySelectorAll(".nav-dot");
function updateDots() {
dots.forEach((dot, index) => {
dot.classList.toggle("active", index === currentSlide);
});
}
function goToSlide(index) {
currentSlide = (index + slideCount) % slideCount;
slider.style.transform = `translateX(-${currentSlide * 100}%)`;
resetAnimation(slides[currentSlide]);
updateDots();
}
function resetAnimation(slide) {
const content = slide.querySelector(".slide-content");
if (content) {
const clone = content.cloneNode(true);
content.parentNode.replaceChild(clone, content);
}
}
function startAutoAdvance() {
if (!intervalId) {
intervalId = setInterval(handleNextSlide, 5000);
}
}
function stopAutoAdvance() {
clearInterval(intervalId);
intervalId = null;
}
startAutoAdvance();
slider.addEventListener("mouseenter", stopAutoAdvance);
slider.addEventListener("mouseleave", startAutoAdvance);
function handleNextSlide() {
stopAutoAdvance();
goToSlide(currentSlide + 1);
startAutoAdvance();
}
function handlePrevSlide() {
stopAutoAdvance();
goToSlide(currentSlide - 1);
startAutoAdvance();
}
prevBtn.addEventListener("click", handlePrevSlide);
nextBtn.addEventListener("click", handleNextSlide);
Macbook Pro
slider-container {
width: 100%;
max-width: 800px;
height: 400px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider {
display: flex;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
height: 100%;
position: relative;
}
.slide::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}
.slide-content {
position: absolute;
bottom: 40px;
left: 40px;
color: #fff;
z-index: 2;
font-family: "Inter", sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.slide-title {
font-size: 32px;
margin: 0;
font-weight: 600;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
animation-delay: 0.3s;
}
.slide-description {
font-size: 18px;
margin: 8px 0;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
animation-delay: 0.5s;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
cursor: pointer;
}
.slider-arrow:hover {
background: rgba(255, 255, 255, 0.3);
}
.slider-arrow svg {
width: 30px;
color: #fff;
display: flex;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
/* Navigation dots */
.slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 2;
}
.nav-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.nav-dot.active {
background: #fff;
transform: scale(1.2);
}
const slides = document.querySelectorAll(".slide");
const sliderNav = document.querySelector(".slider-nav");
const slider = document.querySelector(".slider");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
let currentSlide = 0;
let slideCount = slides.length;
let intervalId = null;
slides.forEach((_, index) => {
const dot = document.createElement("div");
dot.classList.add("nav-dot");
if (index === 0) dot.classList.add("active");
dot.addEventListener("click", () => {
goToSlide(index);
});
sliderNav.appendChild(dot);
});
const dots = document.querySelectorAll(".nav-dot");
function updateDots() {
dots.forEach((dot, index) => {
dot.classList.toggle("active", index === currentSlide);
});
}
function goToSlide(index) {
currentSlide = (index + slideCount) % slideCount;
slider.style.transform = `translateX(-${currentSlide * 100}%)`;
resetAnimation(slides[currentSlide]);
updateDots();
}
function resetAnimation(slide) {
const content = slide.querySelector(".slide-content");
if (content) {
const clone = content.cloneNode(true);
content.parentNode.replaceChild(clone, content);
}
}
function startAutoAdvance() {
if (!intervalId) {
intervalId = setInterval(handleNextSlide, 5000);
}
}
function stopAutoAdvance() {
clearInterval(intervalId);
intervalId = null;
}
startAutoAdvance();
slider.addEventListener("mouseenter", stopAutoAdvance);
slider.addEventListener("mouseleave", startAutoAdvance);
function handleNextSlide() {
stopAutoAdvance();
goToSlide(currentSlide + 1);
startAutoAdvance();
}
function handlePrevSlide() {
stopAutoAdvance();
goToSlide(currentSlide - 1);
startAutoAdvance();
}
prevBtn.addEventListener("click", handlePrevSlide);
nextBtn.addEventListener("click", handleNextSlide);