Fit

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="fit.css">
</head>
<body>

<header>
<a href="#" class="logo"><span>GYM</span>FACTORY</a>
<div id="menu" class="fas fa-bars"></div>
<nav class="navbar">
<ul>
<li><a class="active" href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#service">service</a></li>
<li><a href="#trainer">trainer</a></li>
<li><a href="#plan">plan</a></li>
<li><a href="#register">login</a></li>
</ul>
</nav>
</header>


<section class="home" id="home">
<h1>it's never too easy but <br> you have to try</h1>
<a href="#"><button class="btn">get started</button></a>
</section>


<section class="about" id="about">

<div class="row">
<div class="image">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/top.jpg" alt="">
</div>
<div class="content">
<h3>a word about us</h3>
<p>We want to help you live a fit and healthy lifestyle! We do this by
helping you find the most suitable equipment for your home gym, studio or
commercial gym, keeping your budget, lifestyle and fitness goals in mind.</p>
<p>We stock a wide range of gym equipment, with strength equipment,
cardio, cross training and so much more. Our awesome team is always keen to help,
so please call us to discuss your needs.</p>
<a href="#"><button class="btn">learn more</button></a>
</div>
</div>
</section>


<section class="service" id="service">
<h1 class="heading">our services</h1>
<div class="box-container">
<div class="box">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/mmma.jfif" alt="">
<div class="info">
<h3>MMA</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ducimus a distinctio excepturi libero eveniet amet id vel minima officiis
doloribus.</p>
<a href="#"><button class="btn">more</button></a>
</div>
</div>
<div class="box">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/ygg.jfif" alt="">
<div class="info">
<h3>YOGA</h3>
doloribus.</p>
</div>
</div>
<div class="box">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/hltt.jpg" alt="">
<div class="info">
<h3>HALTEROPHILE</h3>
doloribus.</p>
</div>
</div>
<div class="box">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/bxx.jfif" alt="">
<div class="info">
<h3>BOX</h3>
doloribus.</p>
</div>
</div>
<div class="box">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/jjj.jfif" alt="">
<div class="info">
<h3>JIU JITSU</h3>
doloribus.</p>
</div>
</div>
<div class="box">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/crsft.jfif" alt="">
<div class="info">
<h3>CROSSFIT</h3>
doloribus.</p>
</div>
</div>
</div>
</section>


<section class="trainer" id="trainer">
<h1 class="heading">our trainers</h1>
<div class="box">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/co4.jpg" alt="">
<div class="info">
<h3>Hyolin hh</h3>
</div>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<img src="C:\Users\Nlk99\OneDrive\Images\XXX/co3.jfif" alt="">
<div class="info">
<h3>Badr bb</h3>
</div>
<div class="share">
</div>
</div>
<div class="box">
<div class="info">
<h3>Zack zz</h3>
</div>
<div class="share">
</div>
</div>
<div class="box">
<div class="info">
<h3>Dark dd</h3>
</div>
<div class="share">
</div>
</div>
</div>
</section>


<section class="plan" id="plan">
<h1 class="heading">membership plan</h1>
<div class="box">
<h3 class="title">basic</h3>
<h3 class="price">$10<span>/mo</span></h3>
<h3 class="month">3 months</h3>
<ul>
<li><i class="fas fa-check"></i>weight lifting</li>
<li><i class="fas fa-check"></i>cardio</li>
<li><i class="fas fa-check"></i>yoga</li>
<li><i class="fas fa-check"></i>training</li>
<li><i class="fas fa-check"></i>protein powder</li>
</ul>
<a href="#"><button class="btn">check out</button></a>
</div>
<div class="box">
<h3 class="title">standard</h3>
<ul>
</ul>
</div>
<div class="box">
<h3 class="title">premium</h3>
<ul>
</ul>
</div>
</div>
</section>



<section class="footer">
<div class="box">
<h3>about us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
quas magni pariatur est accusantium voluptas enim nemo facilis sit debitis.</p>
</div>
<div class="box">
<h3>branch locations</h3>
<a href="#">india</a>
<a href="#">USA</a>
<a href="#">japan</a>
<a href="#">france</a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="#">Home</a>
<a href="#">Service</a>
<a href="#">Trainer</a>
<a href="#">Plan</a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#">facebook</a>
<a href="#">instagram</a>
<a href="#">twitter</a>
<a href="#">linkedin</a>
</div>
</div>
</section>
<section class="footer">
created by <a href="#">OUR TEAM</a> | all rights reserved.
</section>



<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script src="js/main.js"></script>
<script>
$(document).ready(function(){
$('#menu').click(function(){
$(this).toggleClass('fa-times');
$('.navbar').toggleClass('nav-toggle');
});
$(window).on('scroll load',function(){
$('#menu').removeClass('fa-times');
$('.navbar').removeClass('nav-toggle');
if($(window).scrollTop() > 60){

$('header').addClass('header-active');
}else{
$('header').removeClass('header-active');
}
$('section').each(function(){
let top = $(window).scrollTop();

let height = $(this).height();
let offset = $(this).offset().top - 200;
let id = $(this).attr('id');
if(top >= offset && top < offset + height){

$('.navbar ul li a').removeClass('active');
$('.navbar').find(`[href="#${id}"]`).addClass('active');
}
});
});
})
</script>
</body>
</html>

Fit

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Fit

Uploaded by

Copyright:

Available Formats

<!

<link rel="stylesheet" href="fit.css">

<a href="#" class="logo"><span>GYM</span>FACTORY</a>

<div id="menu" class="fas fa-bars"></div>

<section class="home" id="home">

<h1>it's never too easy but <br> you have to try</h1>

<a href="#"><button class="btn">get started</button></a>

<section class="about" id="about">

<section class="service" id="service">

<h1 class="heading">our services</h1>

<section class="trainer" id="trainer">

<h1 class="heading">our trainers</h1>

<section class="plan" id="plan">

<h1 class="heading">membership plan</h1>

if($(window).scrollTop() > 60){

let top = $(window).scrollTop();

if(top >= offset && top < offset + height){

You might also like